/* * Custom code goes here. * A template should always ship with an empty custom.css */ .navbar-brand:focus,.navbar-brand:hover,.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar{position:relative;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between;}.navbar>.container,.navbar>.container-fluid{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:5px;padding-top:.3125rem;padding-bottom:5px;padding-bottom:.3125rem;margin-right:16px;margin-right:1rem;font-size:20px;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-nav{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-text{display:inline-block;padding-top:8px;padding-top:.5rem;padding-bottom:8px;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-align:center;-webkit-box-align:center;-ms-grid-row-align:center;align-items:center}.navbar-toggler{padding:4px 12px;padding:.25rem .75rem;font-size:20px;font-size:1.25rem;line-height:1;background:0 0;border:1px solid transparent;border-radius:.25rem}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:center center no-repeat;background-size:100% 100%}@media (max-width:575px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:-ms-flexbox!important;display:-webkit-box!important;display:flex!important}.navbar-expand-sm .navbar-toggler{display:none}}@media (max-width:767px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:-ms-flexbox!important;display:-webkit-box!important;display:flex!important}.navbar-expand-md .navbar-toggler{display:none}}@media (max-width:991px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-ms-flexbox!important;display:-webkit-box!important;display:flex!important}.navbar-expand-lg .navbar-toggler{display:none}}@media (max-width:1199px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:-ms-flexbox!important;display:-webkit-box!important;display:flex!important}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand .navbar-nav .nav-link{padding-right:8px;padding-right:.5rem;padding-left:8px;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:-ms-flexbox!important;display:-webkit-box!important;display:flex!important}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand,.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-dark .navbar-brand,.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)} @font-face { font-family: 'Chalkboard'; src: url('../fonts/Chalkboard.ttc'); } /*--------- GLOBAL--------*/ #wrapper { box-shadow: none; padding-top: 0; background: #FFFFFF; /* Old browsers */ /*background: -moz-linear-gradient(top, #f1f1f1 0%, #ffffff 20%); /* FF3.6-15 */ /*background: -webkit-linear-gradient(top, #f1f1f1 0%,#ffffff 20%); /* Chrome10-25,Safari5.1-6 */ /*background: linear-gradient(to bottom, #f1f1f1 0%,#ffffff 20%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } @media (max-width: 514px) { #main { margin: 0 !important; } } #netreviewsWidgetNum13321widget22avBackgroundSceau { bottom: -8px !important; left: 90px !important; } #netreviewsWidgetNum13321widget22avRateWrap { right: -64px !important; } #cookieNotice { padding: 10px calc((100% - 1140px) / 2); } #custom-text { background: none; } @media (max-width: 991px) { #custom-text { padding: 15px; } } select { font-family: 'Roboto'; font-size: 12px; } p { color: #626568; } b { font-weight: 600; } a { color : #414141; text-decoration: none; } a:hover,a:focus { color: #00ac9f; text-decoration: none; } h1,.h1 { font-size: 24px; text-transform: inherit; margin-top: 20px; } #my-account #wrapper,#authentication #wrapper, #search #wrapper, #password #wrapper { margin-top: 30px; } .help-block { color : #61d0c4; font-weight: 700; text-align: center; } .text-bleu-cyan { color : #61d0c4; } .card { box-shadow: none; border: none; } .header-nav { background-color: #FFF; background-image: url(../img/FondEngrenage.svg); } .header-banner { background: #626568; color: #dcdcdc; font-size: 11px; text-align: center; line-height: 30px; } .header-banner a { color: #61d0c4 !important; font-size: 15px; font-weight : 600; } @media (min-width: 768px) { .header-banner a { float : right; } .header-banner { text-align: left; } } .header-banner a:hover, .header-banner a:focus { color: #61d0c4 !important; } #slogan_banniere { font-size: 23px; color: #61d0c4; } #slogan_banniere_pros { font-size: 14px; color: #61d0c4; } @media (max-width: 1199px) { #slogan_banniere { font-size: 16px; } } @media (max-width: 932px) { #slogan_banniere { display: block; font-size: 15px; margin-bottom: -18px; } } button.add-to-cart.disabled, button.add-to-cart:disabled { cursor: not-allowed; opacity: .65; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; } .btn-primary { color: #fff; background-color: #61d0c4; border-color: transparent; } .btn-primary.focus, .btn-primary:focus, .btn-primary:hover,.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.btn-primary.dropdown-toggle.focus, .open>.btn-primary.dropdown-toggle:focus, .open>.btn-primary.dropdown-toggle:hover { color: #fff; background-color: #00ac9f; border-color: transparent; } .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary:disabled.focus, .btn-primary:disabled:focus, .btn-primary:disabled:hover { background-color: #00ac9f; } .search-widget form button[type=submit] .search:hover { color: #00ac9f; } .form-control:focus, .input-group.focus { outline: .1875rem solid #61d0c4; } body#checkout section.checkout-step .address-item.selected { border: 3px solid #61d0c4; } .text-muted { color: #61d0c4!important; } a.text-muted:focus, a.text-muted:hover { color: #00ac9f!important; } .custom-radio input[type=radio]:checked+span { background-color: #61d0c4; } body#checkout #header .header-nav { padding: 2rem 0 .9375rem; margin-bottom: 25px; } .page-content.page-cms { padding : 0px; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 600; } /*--------- NAVBAR--------*/ .navbar-bricophone .navbar-nav .active>.nav-link, .navbar-bricophone .navbar-nav .nav-link.active, .navbar-bricophone .navbar-nav .nav-link.show, .navbar-bricophone .navbar-nav .show>.nav-link,.navbar-bricophone .navbar-nav .nav-link { color: #FFF; font-size: 17px; font-weight: initial; font-family:'Roboto'; font-weight: 600;} @media screen and (min-width: 992px){ .bg-bricophone{ background-color: #61d0c4; } .navbar-bricophone .navbar-nav .active>.nav-link, .navbar-bricophone .navbar-nav .nav-link.active, .navbar-bricophone .navbar-nav .nav-link.show, .navbar-bricophone .navbar-nav .show>.nav-link,.navbar-bricophone .navbar-nav .nav-link { color: #fff; font-size: 14px; line-height: 20px; font-weight: initial; font-family:'Roboto'; font-weight: 600; } } .navbar-bricophone .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); } .navbar-bricophone .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } @media screen and (max-width: 991px){ .navbar { padding: 0px; } .navbar-nav .nav-item { margin-left: 0px !important; } .navbar-bricophone .navbar-nav .active>.nav-link, .navbar-bricophone .navbar-nav .nav-link.active, .navbar-bricophone .navbar-nav .nav-link.show, .navbar-bricophone .navbar-nav .show>.nav-link,.navbar-bricophone .navbar-nav .nav-link { color: #626568; font-size: 16px; line-height: 30px; font-weight: initial; font-family: 'Roboto'-bold; padding: 0px; padding-left: 30px; } li.nav-item { border-top: 1px solid #b5b5b5; } li.nav-item:first-child { border-top :none; } li.nav-item:last-child{ border-bottom : 1px solid #b5b5b5; } .dropdown-menu { position: relative; display: none; float: left; font-size: 1rem; color: #FFFFFF; text-align: left; list-style: none; background-color: transparent; background-clip: padding-box; border: none; padding: 0px ; margin: 0px ; } .navbar-bricophone .dropdown-item,.navbar-bricophone .dropdown-item:hover,.navbar-bricophone .dropdown-item:focus { color : #626568; font-size: 16px; line-height: 30px; padding : 0px; border-top: 1px solid #b5b5b5; padding-left: 45px; } .fondbleu .container { padding-left : 0px; padding-right: 0px; } .navbar-bricophone .navbar-toggler { color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.1); float: right; padding: 0px; border: 0px; padding-right: 15px; margin-top: 2px; } .navbar-bricophone .navbar-toggler:focus { outline: none; } .dropdown-toggle:after { display: inline-block; width: 0; height: 0; margin-left: .3em; vertical-align: middle; content: ""; border: 0px; } .navbar-custom-title-button { width: 100%; display: inline-block; border-top : 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5; } .title-navbar { float: left; font-size: 16px; line-height: 30px; padding-left: 15px; } #navbarDropdownMenuLinkPieceDetache-icon-custom, #navbarDropdownMenuLinkAccessoire-icon-custom, #navbarDropdownMenuLinkOutils-icon-custom { float: right; margin-right: 15px; margin-top: 4px; } } #cms .fondbleu { min-height : 40px; /* margin-top: 20px; */ } .fondbleu { background-color: #FFFFFF; } @media screen and (min-width: 992px) { .fondbleu { background-color: #61d0c4; } } @media screen and (min-width: 1200px) { .fondbleu { background-color: transparent; background-image: url(../css/img/fondbleu.png); background-repeat: no-repeat; background-position: top; } } @media screen and (min-width: 992px) { .navbar-bricophone { height: 40px; margin-left: 160px; } .dropdown-toggle:after { display: none; } .triangle-bottom-piece-detache .nav-link , .triangle-bottom-outils .nav-link , .triangle-bottom-accessoire .nav-link { color : #626568 !important; } .triangle-bottom-piece-detache:after{ position: absolute; content: ''; left: 40%; width: 0; height: 0; bottom: -3px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 8px solid #ffffff; -moz-transform: scale(0.999); -webkit-backface-visibility: hidden; } .triangle-bottom-outils:after{ position: absolute; content: ''; left: 40%; width: 0; height: 0; bottom: -3px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 8px solid #ffffff; -moz-transform: scale(0.999); -webkit-backface-visibility: hidden; } .triangle-bottom-accessoire:after{ position: absolute; content: ''; left: 30%; width: 0; height: 0; bottom: -3px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 8px solid #ffffff; -moz-transform: scale(0.999); -webkit-backface-visibility: hidden; } } .table-menu-bottom, #menu-bottom-piece-detache, #menu-bottom-outils, #menu-bottom-accessoire { width : 100%; } table.table-menu-bottom { } .table-menu-bottom td{ width : 11.11%; text-align: center; vertical-align: top; padding: 20px 0; } .table-menu-bottom td span { margin-bottom: 6px; } .table-menu-bottom a { color: #626568; } .navbar-bricophone .navbar-nav .nav-link:hover,.navbar-bricophone .navbar-nav .nav-link:focus { color : #626568; } .close { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; } /*--------- CUSTOM ICON ---------*/ .icon-bottom-accessoire { background-size: 40px; background-repeat: no-repeat; background-position: center; padding: 20px; display: inline-block; } .icon-toute-pieces-gray,.icon-outils-gray { background-image: url(../img/icon-accessoire/TousToutes_Gris.svg); } .icon-toute-pieces-green, .icon-toute-pieces-gray:hover,.icon-toute-pieces-gray:focus,.icon-outils-green, .icon-outils-gray:hover,.icon-outils-gray:focus { background-image: url(../img/icon-accessoire/TousToutes_Vert.svg); } .icon-outilsexclusifs-gray{ background-image: url(../img/icon-outils/1-OutilsExclus_Gris.svg); } .icon-outilsexclusifs-green, .icon-outilsexclusifs-gray:hover, .icon-outilsexclusifs-gray:focus { background-image: url(../img/icon-outils/1-OutilsExclus_Vert.svg); } .icon-devisser-gray{ background-image: url(../img/icon-outils/2-Devisser_Gris.svg); } .icon-devisser-green, .icon-devisser-gray:hover, .icon-devisser-gray:focus { background-image: url(../img/icon-outils/2-Devisser_Vert.svg); } .icon-manipuler-gray{ background-image: url(../img/icon-outils/3-Manipuler_Gris.svg); } .icon-manipuler-green, .icon-manipuler-gray:hover, .icon-manipuler-gray:focus { background-image: url(../img/icon-outils/3-Manipuler_Vert.svg); } .icon-coller-gray{ background-image: url(../img/icon-outils/4-Coller_Gris.svg); } .icon-coller-green, .icon-coller-gray:hover, .icon-coller-gray:focus { background-image: url(../img/icon-outils/4-Coller_Vert.svg); } .icon-nettoyer-gray{ background-image: url(../img/icon-outils/5-Nettoyer_Gris.svg); } .icon-nettoyer-green, .icon-nettoyer-gray:hover, .icon-nettoyer-gray:focus { background-image: url(../img/icon-outils/5-Nettoyer_Vert.svg); } .icon-coffrets-gray{ background-image: url(../img/icon-outils/6-Coffrets_Gris.svg); } .icon-coffrets-green, .icon-coffrets-gray:hover, .icon-coffrets-gray:focus { background-image: url(../img/icon-outils/6-Coffrets_Vert.svg); } .icon-aidemontage-gray{ background-image: url(../img/icon-outils/7-AideMontage_Gris.svg); } .icon-aidemontage-green, .icon-aidemontage-gray:hover, .icon-aidemontage-gray:focus { background-image: url(../img/icon-outils/7-AideMontage_Vert.svg); } .icon-pro-gray{ background-image: url(../img/icon-outils/8-Pro_Gris.svg); } .icon-pro-green, .icon-pro-gray:hover, .icon-pro-gray:focus { background-image: url(../img/icon-outils/8-Pro_Vert.svg); } .icon-gtool-gray{ background-image: url(../img/icon-outils/9-gTool_Gris.svg); } .icon-gtool-green, .icon-gtool-gray:hover, .icon-gtool-gray:focus { background-image: url(../img/icon-outils/9-gTool_Vert.svg); } .icon-ecran-gray{ background-image: url(../img/icon-accessoire/ecrans_Gris.svg); } .icon-ecran-green, .icon-ecran-gray:hover, .icon-ecran-gray:focus { background-image: url(../img/icon-accessoire/ecrans_Vert.svg); } .icon-batterie-gray{ background-image: url(../img/icon-accessoire/Batterie_Gris.svg); } .icon-batterie-green, .icon-batterie-gray:hover,.icon-batterie-gray:focus { background-image: url(../img/icon-accessoire/Batterie_Vert.svg); } .icon-chassis-gray{ background-image: url(../img/icon-accessoire/Coque_Gris.svg); } .icon-chassis-green, .icon-chassis-gray:hover,.icon-chassis-gray:focus { background-image: url(../img/icon-accessoire/Coque_Vert.svg); } .icon-nappe-gray{ background-image: url(../img/icon-accessoire/Nappe_Gris.svg); } .icon-nappe-green, .icon-nappe-gray:hover,.icon-nappe-gray:focus { background-image: url(../img/icon-accessoire/Nappe_Vert.svg); } .icon-outillage-gray{ background-image: url(../img/icon-accessoire/Outillage_Gris.svg); } .icon-outillage-green, .icon-outillage-gray:hover,.icon-outillage-gray:focus { background-image: url(../img/icon-accessoire/Outillage_Vert.svg); } .icon-composant-gray{ background-image: url(../img/icon-accessoire/Composant_Gris.svg); } .icon-composant-green,.icon-composant-gray:hover,.icon-composant-gray:focus { background-image: url(../img/icon-accessoire/Composant_Vert.svg); } .icon-connecteur-gray{ background-image: url(../img/icon-accessoire/FPC_Gris.svg); } .icon-connecteur-green,.icon-connecteur-gray:hover,.icon-connecteur-gray:focus { background-image: url(../img/icon-accessoire/FPC_Vert.svg); } .icon-desoxydation-gray{ background-image: url(../img/icon-accessoire/Desox_Gris.svg); } .icon-desoxydation-green,.icon-desoxydation-gray:hover,.icon-desoxydation-gray:focus { background-image: url(../img/icon-accessoire/Desox_Vert.svg); } .icon-cable-gray{ background-image: url(../img/icon-accessoire/Cable_Gris.svg); } .icon-cable-green,.icon-cable-gray:hover,.icon-cable-gray:focus { background-image: url(../img/icon-accessoire/Cable_Vert.svg); } .icon-camera-gray{ background-image: url(../img/icon-accessoire/Camera_Gris.svg); } .icon-camera-green,.icon-camera-gray:hover,.icon-camera-gray:focus { background-image: url(../img/icon-accessoire/Camera_Vert.svg); } .icon-chargeur-gray{ background-image: url(../img/icon-accessoire/Chargeur_Gris.svg); } .icon-chargeur-green,.icon-chargeur-gray:hover,.icon-chargeur-gray:focus { background-image: url(../img/icon-accessoire/Chargeur_Vert.svg); } .icon-divers-gray{ background-image: url(../img/icon-accessoire/Divers_Gris.svg); } .icon-divers-green,.icon-divers-gray:hover,.icon-divers-gray:focus { background-image: url(../img/icon-accessoire/Divers_Vert.svg); } .icon-housse-gray{ background-image: url(../img/icon-accessoire/Housse_Gris.svg); } .icon-housse-green,.icon-housse-gray:hover,.icon-housse-gray:focus { background-image: url(../img/icon-accessoire/Housse_Vert.svg); } .icon-memoire-gray{ background-image: url(../img/icon-accessoire/Memoire_Gris.svg); } .icon-memoire-green,.icon-memoire-gray:hover,.icon-memoire-gray:focus { background-image: url(../img/icon-accessoire/Memoire_Vert.svg); } .icon-powerbank-gray{ background-image: url(../img/icon-accessoire/Powerbank_Gris.svg); } .icon-powerbank-green,.icon-powerbank-gray:hover,.icon-powerbank-gray:focus { background-image: url(../img/icon-accessoire/Powerbank_Vert.svg); } .icon-protect-gray{ background-image: url(../img/icon-accessoire/Protect_Gris.svg); } .icon-protect-green,.icon-protect-gray:hover,.icon-protect-gray:focus { background-image: url(../img/icon-accessoire/Protect_Vert.svg); } .icon-tiroirs-sim-gray{ background-image: url(../img/icon-accessoire/Sim_Gris.svg); } .icon-tiroirs-sim-green,.icon-tiroirs-sim-gray:hover,.icon-tiroirs-sim-gray:focus { background-image: url(../img/icon-accessoire/Sim_Vert.svg); } .icon-son-gray{ background-image: url(../img/icon-accessoire/Son_Gris.svg); } .icon-son-green,.icon-son-gray:hover,.icon-son-gray:focus { background-image: url(../img/icon-accessoire/Son_Vert.svg); } .icon-verres-trempes-gray{ background-image: url(../img/icon-accessoire/VerreTrempe_Gris.svg); } .icon-verres-trempes-green, .icon-verres-trempes-gray:hover, .icon-verres-trempes-gray:focus { background-image: url(../img/icon-accessoire/VerreTrempe_Vert.svg); } .icon-chassis-gray{ background-image: url(../img/icon-accessoire/ChassisVitresAR_Gris.svg); } .icon-chassis-green,.icon-chassis-gray:hover,.icon-chassis-gray:focus { background-image: url(../img/icon-accessoire/ChassisVitresAR_Vert.svg); } .icon-vitre-arriere-gray{ background-image: url(../img/icon-accessoire/ChassisVitresAR_Gris.svg); } .icon-vitre-arriere-green,.icon-vitre-arriere-gray:hover,.icon-vitre-arriere-gray:focus { background-image: url(../img/icon-accessoire/ChassisVitresAR_Vert.svg); } .footer_top_links { display: flex; justify-content: center; gap: 30px; } .footer_top_links a { display: flex; width: 160px; height: 100px; font-size: 16px; align-items: center; justify-content: center; } .footer_top_links a img { display: block; height: 50px; margin: 0 auto 10px auto; } .footer_top_links a span { display: none; } .footer_top_links a:hover img { display: none; } .footer_top_links a:hover span { display: block; } @media (max-width: 560px) { .footer_top_links { gap: 10px; } .footer_top_links a { font-size: 12px; } .footer_top_links a img { height: 40px; } } .icon-menu { background-size: 15px; background-repeat: no-repeat; background-position: center; padding: 5px 10px 0px 10px; vertical-align: middle; margin-right: 5px; } .icon-menu-mea { background-size: 20px; background-repeat: no-repeat; background-position: center; padding: 5px 10px 0px 10px; vertical-align: middle; margin-right: 5px; } .icon-alcatel{ background-image: url(../img/icon-marque/alcatel.svg); } .icon-apple{ background-image: url(../img/icon-marque/apple.svg); } .icon-asus{ background-image: url(../img/icon-marque/asus.svg); } .icon-htc{ background-image: url(../img/icon-marque/htc.svg); } .icon-huawei{ background-image: url(../img/icon-marque/huawei.svg); } .icon-lg{ background-image: url(../img/icon-marque/lg.svg); } .icon-meizu{ background-image: url(../img/icon-marque/meizu.svg); } .icon-motorola{ background-image: url(../img/icon-marque/motorola.svg); } .icon-nexus{ background-image: url(../img/icon-marque/nexus.svg); } .icon-nokia{ background-image: url(../img/icon-marque/nokia.svg); } .icon-one{ background-image: url(../img/icon-marque/one.svg); } .icon-outils{ background-image: url(../img/icon-marque/outils.svg); } .icon-samsung{ background-image: url(../img/icon-marque/samsung.svg); } .icon-sony{ background-image: url(../img/icon-marque/sony.svg); } .icon-wiko{ background-image: url(../img/icon-marque/wiko.svg); } .icon-html{ background-image: url(../img/icon-tuto/html.svg); } .icon-pdf{ background-image: url(../img/icon-tuto/pdf.svg); } .icon-print{ background-image: url(../img/icon-tuto/print.svg); } .icon-social { background-size: 30px; background-repeat: no-repeat; background-position: center; padding: 8px 17px 5px 17px; vertical-align: middle; } .icon-facebook{ background-image: url(../img/icon-sociaux/facebook_bleu.svg); } .icon-twitter{ background-image: url(../img/icon-sociaux/twitter_bleu.svg); } .icon-colis-categorie { background-image: url(../img/Colis_Categorie.svg); } /* .icon-panier { background-size: 20px; background-repeat: no-repeat; background-position: center; background-image: url(../img/icon-panier/panier.svg); display: inline-block; vertical-align: middle; width: 20px; height: 20px; } /*----ICONES OUTILS TUTO-----*/ .outil-tuto { background-size: 150px; background-repeat: no-repeat; background-position: center; padding: 20px 75px; display: inline-block; } .icon-tuto-1{ background-image: url(../img/icon-tuto/alcool.svg); } .icon-tuto-2{ background-image: url(../img/icon-tuto/cartePVC.svg); } .icon-tuto-3{ background-image: url(../img/icon-tuto/colle.svg); } .icon-tuto-4{ background-image: url(../img/icon-tuto/cruciforme.svg); } .icon-tuto-5{ background-image: url(../img/icon-tuto/levier_nylon.svg); } .icon-tuto-6{ background-image: url(../img/icon-tuto/mediator.svg); } .icon-tuto-7{ background-image: url(../img/icon-tuto/pentalobe.svg); } .icon-tuto-8{ background-image: url(../img/icon-tuto/pincette.svg); } .icon-tuto-9{ background-image: url(../img/icon-tuto/plat.svg); } .icon-tuto-10{ background-image: url(../img/icon-tuto/print.svg); } .icon-tuto-11{ background-image: url(../img/icon-tuto/sim.svg); } .icon-tuto-12{ background-image: url(../img/icon-tuto/spatule.svg); } .icon-tuto-13{ background-image: url(../img/icon-tuto/torx.svg); } .icon-tuto-14{ background-image: url(../img/icon-tuto/triwing.svg); } .icon-tuto-15{ background-image: url(../img/icon-tuto/ventouse.svg); } .icon-tuto-16{ background-image: url(../img/icon-tuto/lingettes.svg); background-size: 212px; } .icon-tuto-17{ background-image: url(../img/icon-tuto/adhesif.svg); padding: 60px 75px; background-size: 400px; } .icon-tuto-18{ background-image: url(../img/icon-tuto/hexagonal.svg); } /*--------- SHAREBUTTON ---------*/ .facebook.icon-gray{ background-image: url(../img/icon-sociaux/facebook_bleu.svg); /*background-image: url(../img/icon-sociaux/facebook_gris.svg);*/ } /* .facebook.icon-gray:hover,.facebook.icon-gray:focus{ background-image: url(../img/icon-sociaux/facebook_bleu.svg); } */ .twitter.icon-gray{ /*background-image: url(../img/icon-sociaux/twitter_gris.svg);*/ background-image: url(../img/icon-sociaux/twitter_bleu.svg); } /* .twitter.icon-gray:hover,.twitter.icon-gray:focus{ background-image: url(../img/icon-sociaux/twitter_bleu.svg); } */ .instagram.icon-gray{ background-image: url(../img/icon-sociaux/instagram_couleur.svg); /*background-image: url(../img/icon-sociaux/instagram_gris.svg);*/ } /* .instagram.icon-gray:hover,.instagram.icon-gray:focus{ background-image: url(../img/icon-sociaux/instagram_couleur.svg); } */ .youtube.icon-gray{ /*background-image: url(../img/icon-sociaux/youtube_gris.svg);*/ background-image: url(../img/icon-sociaux/youtube_rouge.svg); } /* .youtube.icon-gray:hover,.youtube.icon-gray:focus{ background-image: url(../img/icon-sociaux/youtube_rouge.svg); } */ .social-sharing li { box-shadow: none; border-radius: initial; background-position: initial; margin-left: initial; background-color: transparent; width: 30px; height: 30px; background-size: 30px; } .social-sharing { display : inline; text-align: end; } @media (max-width: 767px) { .social-sharing { display : inline; text-align: end; } } /*--------- PRODUITS ---------*/ .product-additional-info { margin-top: 20px; } #navbar-top-produit .open>.dropdown-menu { width: 100%; } #title-product { font-size: 24px; font-family:'Roboto'; font-weight: 600; color : #404040; margin-top: 20px; } .product-images>li.thumb-container>.thumb.selected, .product-images>li.thumb-container>.thumb:hover { border: 1px solid #bcbcbc; box-shadow: none; } .product-cover img { box-shadow: none; background: #fff; border: 1px solid #bcbcbc; } #products .product-miniature .product-flags .new { background-color: red; } .product-reference { text-align: right; color : #b5b5b5; font-size: 12px; margin-top: 20px; } .product-quantity { display: -webkit-box; display: -ms-flexbox; display: flex; } /* .bloc-prix-ajout { background-color: #61d0c4; color : white; padding: 10px 10px 4px 10px; text-align: center; } .product-availability-date label{ text-align: center; font-weight: 600; color : #626568; } .product-prices div { margin-bottom: 0px; } .pull-right.tax-shipping-delivery-label { color: #FFFFFF; font-weight: 700; font-size: 13px; } .product-price{ margin-top: 0px; margin-bottom: 0px; } .deuxfoissansfrais { float: right; font-size: 9px; line-height: 9px; } .has-discount.product-price, .has-discount p { margin-top: 10px; } .product-price.h5.has-discount{ margin-top: 0px; margin-bottom: 0px; } .product-quantity .add, .product-quantity .qty { margin-bottom: 0px; height : 44px; float : none; display : block; } button.btn.btn-primary.add-to-cart { padding : 9px; background-color: #626568; border-radius: 5px; } i.material-icons.shopping-cart{ margin-right: 0px; } button.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-up { background-color: #d9d9d9; border: 0px; border-top-right-radius: 5px; } button.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-down { background-color: #d9d9d9; border: 0px; border-bottom-right-radius: 5px; } .product-quantity .input-group-btn-vertical { float: left; display :inline; } .product-quantity #quantity_wanted { width: 42px; text-align: center; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .current-price { font-family:'Roboto'; font-weight: 600; font-size: 20px; color: white; } .product-quantities .label { color : white; font-size: 19px; font-family:'Roboto'; font-weight: 600; } .product-quantities { color: #626568; font-family:'Roboto'; font-weight: 600; text-align: initial; font-size: 15px; } .product-prices { margin-top : 0px; } .prix { } .stock { padding-right : 0px; } */ .show_list, .show_grid { cursor:pointer; opacity:1.0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .show_list:hover, .show_grid:hover { opacity:0.7; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .product_show_list { width:100%; } .product_show_list .highlighted-informations, .product_show_list .product-description, .product_show_list .thumbnail-container { width:100%!important; } .product_show_list .product-thumbnail { text-align:center; } .product-description-short { color : #626568; font-size: 14px; } span.regular-price { font-size: 12px; color: white; } .product-discount { margin-bottom: 0px !important; } .quantity-discount-add-cart { } .tabs .nav-tabs { border-bottom: 1px solid #b5b5b5; border-top: 1px solid #b5b5b5; background: #ffffff; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(left, #ffffff 0%,#f1f1f1 15%,#f1f1f1 85%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, right top, from(#ffffff),color-stop(15%, #f1f1f1),color-stop(85%, #f1f1f1),to(#ffffff)); background: linear-gradient(to right, #ffffff 0%,#f1f1f1 15%,#f1f1f1 85%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } .tabs .nav-tabs li:first-child{ margin-left : 20px; } .tabs .nav-tabs .nav-link.active { color: #404040; border-bottom: none; border-left: 1px solid #b5b5b5; border-right: 1px solid #b5b5b5; margin-bottom: 1px; } .tabs .nav-tabs .nav-link { color: #626568; font-family: 'Roboto'; font-size: 18px; } .tabs .nav-tabs .nav-link:hover { color : black; border-bottom: none; } .tabs .nav-tabs .nav-item { color: #626568; } .nav-tabs .nav-item+.nav-item { margin-left: 0px; } .nav-tabs .nav-item { margin-left: 0px; } #product .product-flags { position: absolute; top: 0; width: 100%; height: 340px; } li.product-flag { background: #626568; } #product .product-flag.out_of_stock { width: 60%; top: 35%; left: 20%; margin: 0; text-align: center; } #product li.product-flag.original_product { background: #09b0f8eb; } #category .original_product { position: absolute; z-index: 2; bottom: -6px; left: 0; width: 60px; background: #09b0f8eb; font-size: 11px; color: #ffffff; text-transform: uppercase; font-weight: 600; line-height: 13px; padding: 4px 4px 3px 6px; border-radius: 0 10px 10px 0; } @media (max-width: 480px) { #category .original_product { top: 110px; } } li.product-flag.lowest_price { margin-top: 2.75rem; } /* CUSTOM PRODUCT FLAGS */ #product .custom_flags { position: absolute; display: flex; width: 40%; flex-direction: column; align-items: flex-start; } #product .custom_flags .custom_flag { position: relative; z-index: 2; left: -15px; padding: 12px 16px 10px 16px; margin-top: 15px; font-size: 12px; text-transform: uppercase; font-weight: bold; border-radius: 0 8px 8px 0; } #product .custom_flags .custom_flag::before { content: ''; position: absolute; display: block; bottom: -15px; left: 0; width: 15px; height: 15px; clip-path: polygon(100% 0, 0 0, 100% 100%); background: #404040; } #category .custom_flags { position: absolute; display: flex; width: 40%; flex-direction: column; align-items: flex-start; } #category .custom_flags .custom_flag { position: relative; z-index: 10; left: -6px; padding: 8px; margin-top: 10px; font-size: 10px; color: #fff; text-transform: uppercase; font-weight: bold; border-radius: 0 8px 8px 0; } #category .custom_flags .custom_flag::before { content: ''; position: absolute; display: block; bottom: -6px; left: 0; width: 6px; height: 6px; clip-path: polygon(100% 0, 0 0, 100% 100%); background: #404040; } @media (max-width: 560px) { #category .custom_flags { width: 30%; height: auto; } #category .custom_flags .custom_flag { left: 0; padding: 5px; font-size: 9px; line-height: 1.4; } #category .custom_flags .custom_flag::before { display: none; } } @media (max-width:768px) { .nav-tabs > li { display:block; float:none; width : 100%; text-align: center; } .tabs .nav-tabs li:first-child { margin-left: 0px; border-top: 0px solid transparent; } .tabs .nav-tabs .nav-link.active { color: #626568; border: 0 solid transparent; } .tabs .nav-tabs { border: 1px solid #b5b5b5; background: #f1f1f1; } .tabs .nav-tabs .nav-item { margin: 0px; border-top: 1px solid #b5b5b5; } } .tabs { box-shadow: none; margin-top:16px; margin-top: 1rem; background: #fff; padding: inherit; margin-bottom: 2rem; margin-left: -15px; margin-right: -15px; } .tabs .tab-pane { font-family: 'Roboto'; } .tabs .tab-pane li{ list-style-type: disc; margin-left: 20px; } table.data-sheet { width : 100%; font-size: 15px; } td.name{ width : 40%; background-color : #FFFFFF; padding: 5px; padding-left: 15px; border-left : 1px solid #b5b5b5 ; border-right : 1px solid #b5b5b5 ; } td.value{ width : 60%; background-color : #FFFFFF; padding: 5px; padding-left: 15px; border-right : 1px solid #b5b5b5 ; font-family:'Roboto'; font-weight: 600; } table.data-sheet tr:first-child > td { border-top : 1px solid #b5b5b5; } table.data-sheet tr:last-child > td { border-bottom : 1px solid #b5b5b5; } table.data-sheet tr:nth-of-type(2n)>td{ background-color : #f1f1f1; } .product-features { margin-top: 0px; margin-left: 0px; } .product-actions .control-label { margin-bottom: 0px; line-height: 15px; font-size: 15px; margin-top: 5px; } .title-additionnal-block { font-size: 16px; font-family:'Roboto'; font-weight: 600; border-bottom: 1px solid #b5b5b5; margin-bottom: 10px; margin-top: 10px; padding-bottom: 5px; padding-left: 10px; color : #404040; } .content-additionnal-block { margin-left: 10px; } .content-additionnal-block li { list-style-type: disc; margin-left: 20px; } .bouton-tuto-video { background: url(../css/img/tuto-video.png) no-repeat left; background-color: #ffffff; padding: 6px 60px 5px 30px; border: 1px solid #bcbcbc; display: inline-block; margin-bottom: 10px; margin-right: 10px; content: "voir le contenu"; background-position-x: 3px; } .bouton-tuto-photo{ background: url(../css/img/tuto-photo.png) no-repeat center; background-color: #ffffff; padding: 6px 52px 5px 30px; border: 1px solid #bcbcbc; display: inline-block; margin-bottom: 10px; margin-right: 10px; content: "voir le contenu"; background-position-x: 3px; } .bouton-tuto-3d{ background: url(../css/img/tuto-3d.png) no-repeat center; background-color: #ffffff; padding: 6px 60px 5px 30px; border: 1px solid #bcbcbc; display: inline-block; margin-bottom: 10px; margin-right: 10px; content: "voir le contenu"; background-position-x: 3px; } a.bouton-tuto-video,a.bouton-tuto-photo,a.bouton-tuto-3d { font-size: 12px; color: #626568; font-weight: bolder; border-radius: 5px; } .additionnal-block iframe{ width : 100%; height: 108px; margin-bottom : 10px; border: 1px solid #bcbcbc; } .content-additionnal-block .col-md-5 { padding-left: 0px; padding-right: 10px; } .content-additionnal-block .col-md-7 { padding-right: 10px; padding-left: 10px; } img.img-repa { margin-left: 35px; margin-right: 5px; } .Réparabilité .content-additionnal-block { color : #50ccbf; font-size : 14px; font-weight: bolder; } .input-group { display : inherit; } #product-availability { color: #626568; font-size: 18px; font-family:'Roboto'; font-weight: 600; line-height: 22px; } .product-discount.pull-right span{ color: #626568; } /*#products img, .featured-products img, .product-accessories img, .product-miniature img { margin-left: 0px; }*/ @media (min-width: 768px){ #product .col-lg-10 { padding-right: 0px; } } @media screen and (min-width: 992px) and (max-width: 1200px){ .product-quantities .label { font-size: 16px; } .product-quantities { font-size: 12px; } input#quantity_wanted { width: 30px !important; padding: 0px 0px !important; } .tabs .nav-tabs li:first-child { margin-left: 70px; } .navbar-bricophone .navbar-nav .active>.nav-link, .navbar-bricophone .navbar-nav .nav-link.active, .navbar-bricophone .navbar-nav .nav-link.show, .navbar-bricophone .navbar-nav .show>.nav-link, .navbar-bricophone .navbar-nav .nav-link { font-size: 15px; } .table-menu-bottom a { font-size: 12px; } .bouton-tuto-video { padding: 6px 24px 5px 30px; } .bouton-tuto-photo { padding: 5px 20px 5px 30px; } .bouton-tuto-3d { padding: 6px 21px 5px 30px; } } @media screen and (max-width: 991px){ .bouton-tuto-photo { padding: 6px 12px 5px 30px; } .bouton-tuto-3d { padding: 6px 12px 5px 30px; margin-right: 0px; } .bouton-tuto-video { padding: 6px 12px 5px 30px; } .content-additionnal-block .col-md-5 { padding-left: 10px; } .content-additionnal-block .col-md-7 { padding-right: 15px; } .prix { padding-left: 0px; } .content-additionnal-block img { width: auto; height: 15px; margin-right: 5px; } .Réparabilité .content-additionnal-block { display : -webkit-box; display : -ms-flexbox; display : flex; } } /*.scroll-box-arrows i { height : 88px; }*/ .amzpayments-product-banner { display : none; } .js-mailalert button.btn.btn-primary { white-space: normal; font-size: 13px; /*text-transform: none;*/ } /*--------- MENU DE GAUCHE + PRODUIT CONSEILLES ---------*/ .bloc-avantage-expedition-related { box-shadow: none; background: #fff; margin-bottom:25px; margin-bottom: 1.5625rem; font-size: 15px; background: #f1f1f1; } .img-avantage { width: 40px; height: auto; float: left; margin-right: 5px; } .sous-texte-avantage-expedition{ font-family:'Roboto'; font-weight: 400; font-size: 11px; line-height: 11px; margin-top: 10px; margin-bottom: 15px; } .title-avantage-expedition-related{ font-family: 'Roboto'; font-size: 13px; line-height: 17px; } .main-title-avantage-expedition-related{ font-family:'Roboto'; font-weight: 600; font-size: 19px; padding: 10px; color: #404040; } @media(min-width: 767px) and (max-width: 768px){ .main-title-avantage-expedition-related{ font-size: 14px; word-break: break-all; } .bloc-avantage-expedition-related { margin-top: 1.5625rem; } } .text-avantage-expedition-related{ padding: 10px; font-size : 13px; line-height: 13px; } .text-avantage-expedition-related ul { list-style: disc; padding-left: 15px; text-indent: -5px; font-size: 12px; } .timer-expedition{ font-family:'Roboto'; font-weight: 600; font-size: 20px; line-height: 20px; color : #61d0c4; margin-top: 15px; text-align: center; } .message-produit { font-size: 12px; text-align: center; background: #dff6f3; padding-top: 5px; padding-bottom: 5px; } .bloc-related { border: 1px solid #b5b5b5; margin-top: 5px; } .main-title-related { font-family:'Roboto'; font-weight: 600; font-size: 19px; padding: 10px; color: #404040; background: #f1f1f1; } .related-product { display: block; position: relative; border-bottom: 1px solid #f1f1f1; padding:0 10px 5px 10px !important; margin: 0 !important; margin-top: 15px !important; } .related-product-img img{ width : 100%; max-width: 28px; border : 1px solid #bcbcbc; } .related-product-img { padding-left: 10px; padding-right: 10px; } .related-product-addtocart { text-align: center; } .related-product-price { padding-right: 0px; padding-left: 0px; padding-top: 6px; text-align: center; color : #61d0c4; text-align: center; font-size: 20px; font-family:'Roboto'; font-weight: 600; } @media (min-width: 767px) { .kit-product-price { font-size: 15px; } } .related-product-title a{ font-family:'Roboto'; font-weight: 600; color : #626568; } .related-product-title { margin-bottom: 5px; } /* .add-cart-button{ background-image: url(../img/icon-panier/panier-blanc.svg); background-repeat: no-repeat; background-position: center; background-color: #626568; border-radius: 5px; padding: 21px; box-shadow: 2px 2px 11px 0 rgba(0,0,0,.1); } */ .add-cart-button:hover,.add-cart-button:focus{ background-image: url(../img/icon-panier/panier.svg); } .add-cart-related-button{ background-image: url(../img/icon-panier/panier-options-blanc.svg); background-size: 20px; background-repeat: no-repeat; background-position: center; background-color: #61d0c4; border-radius: 5px; padding: 13px; box-shadow: 2px 2px 11px 0 rgba(0,0,0,.1); } .description-related-product { display:none; overflow: auto; word-wrap: break-word; padding-top: 10px; } .description-related-product p { max-width: 100%; text-align : left; } .description-related-product img { max-width: 100%; text-align : center; } .add-cart-related-button:hover,.add-related-cart-button:focus{ background-image: url(../img/icon-panier/panier-options-gris.svg); } .block-category .category-cover img { width: 100%; height: 100%; } .category-top-menu .h6, #search_filters, #search_filters_brands, #search_filters_suppliers .h6 { font-size: 20px; color : #f7a30f; } .block-categories { box-shadow: none; border: 1px solid #b5b5b5; padding: 0px; font-size: 14px; background: none; } #search_filters, #search_filters_brands, #search_filters_suppliers { box-shadow: none; border: 1px solid #b5b5b5; } .block-categories .category-sub-menu .category-sub-link { color: #c0c0c0; } .category-top-menu .material-icons { color : #61d0c4; } .block-categories .category-sub-menu li[data-depth="0"]>a { border-bottom: none; } .block-category { min-height: 110px; background: url("../css/img/bg-category.jpg") no-repeat center; box-shadow: none; border: none; } .expand-related-product { width: 20px; height: 20px; border: 1px solid #DCDCDC; border-radius: 5px; font-size: 18px; font-style: normal; line-height: 20px; text-align: center; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; color: #626568; -moz-osx-font-smoothing: grayscale; margin: 3px 0px 0 -5px; cursor: pointer; } @media screen and (min-width: 992px) and (max-width: 1200px){ .main-title-avantage-expedition-related { font-size: 16px; } .related-product-img { display: none; } .related-product-price { padding-left: 12px; padding-top: 5px; font-size: 14px; } .add-cart-related-button { background-size: 16px; padding: 10px; } .expand-related-product { margin: 0px 0px 0 3px; } } @media screen and (max-width: 991px){ .bloc-related { margin-top: 20px; margin-bottom: 20px; } } /*--------- MENU CATEGORIES ---------*/ .category-sub-menu li[data-depth="0"]{ border-bottom: 1px solid #b5b5b5; padding-left: 10px; padding-right: 0px; } .category-sub-menu li[data-depth="0"]:last-child{ border-bottom: none; } .block-categories .category-sub-menu li[data-depth="1"] a { color: #626568; font-size: 13px; padding-left: 15px; } .block-categories .category-sub-menu li[data-depth="1"] a:hover,.block-categories .category-sub-menu li[data-depth="1"] a:focus { color : #61d0c4; } .block-categories .category-sub-menu li[data-depth="0"]>a { border-bottom: none; } .block-categories .category-sub-menu li[data-depth="1"] { margin-bottom: 0px; } .category-top-menu{ margin-bottom: 0px; } .category-top-menu li { padding-bottom: 5px; margin-top: 5px; } .block-categories .category-sub-menu{ margin-top: 0px; } @media (max-width: 767px) { .block-categories { box-shadow: none; border: none; padding: 0px; margin: -15px; margin-bottom: 25px; } .category-top-menu .material-icons { color: #626567; } .category-sub-menu li[data-depth="0"]:first-child { border-top: 1px solid #626567; } .category-sub-menu li[data-depth="0"] { border-bottom: 1px solid #626567; padding-left : 25px; min-height: 30px; } .category-top-menu { margin-top: .625rem; } } @media screen and (min-width: 544px) and (max-width:767px){ .category-sub-menu li[data-depth="0"] { margin-left: -15px; margin-right: -15px; } } /*--------- BREADCRUMBS --------- .breadcrumb li:last-child { content: "/"; color: #404040; margin: 0; } .breadcrumb li { display: inline; } .breadcrumb ol { padding-left: 0; margin-bottom: 0; } .breadcrumb { background: transparent; padding: 0; margin-top: 15px; margin-bottom: 5px; } .breadcrumb li a { color: #b5b5b5; } .breadcrumb li:after { content: "/"; color: #b5b5b5; margin: .3125em; } .breadcrumb li:last-child:after { content: ""; } .container-breadcrumb { background : #fff; } /*--------- BANNIERE ANIME ---------*/ .fondbanniereanime { background: #f1f1f1; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f1f1f1 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1),to(#ffffff)); background: linear-gradient(to bottom, #f1f1f1 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .container-banniere-anime #image { width: 100%; } @media(max-width: 768px){ .container-banniere-anime { margin-top: 36px; margin-bottom: 20px; } } /*--------- LISTING PRODUITS CATEGORIES ---------*/ .article-brico-listing{ width : 94%; border: 1px solid #b5b5b5; margin-bottom: 10px !important; padding: 10px; } .thumbnail-brico-listing{ width : 100%; max-width: 105px; } .product-title-brico-listing{ margin-top: 10px; } .product-title-brico-listing a { font-size: 16px; font-family:'Roboto'; font-weight: 600; color : #626568; } .product-description-short-brico-listing { min-height: 40px; font-family: 'Roboto'; font-weight: 400; } .product-description-short-brico-listing p, .product-description-short-brico-listing span, .product-description-short-brico-listing font { font-family: 'Roboto' !important; font-size: 13px !important; color : #626568 !important; font-weight: normal !important; margin-bottom: 0px; } .product-quantity-brico-listing { font-size: 14px; color : #50ccbf; font-weight: 600; } .product-price-brico-listing { font-size: 24px; font-family:'Roboto'; font-weight: 600; color : #50ccbf; margin-top: 20px; margin-bottom: 20px; } .product-price-brico-listing.has-discount { margin-top: 10px; margin-bottom: 10px; } .article-brico-listing button.add-to-cart { background-color: #ffffff; padding: 5px 38px 5px 5px; width: 100px; border: 1px solid #bcbcbc; border-radius: 10px; display: inline-block; content: "voir le contenu"; outline: none; } .add-to-cart-hcs { background: url(../img/icon-panier/panier-categorie.svg) no-repeat left; background-color: #ffffff; padding: 5px 38px 5px 5px; width: 100px; border: 1px solid #bcbcbc; border-radius: 10px; display: inline-block; content: "voir le contenu"; background-position-x: 62px; outline: none; } /* .article-brico-listing button.add-to-cart { background: url(../img/icon-panier/panier-categorie.svg) no-repeat left; background-color: #ffffff; padding: 5px 38px 5px 5px; width: 100px; border: 1px solid #bcbcbc; border-radius: 10px; display: inline-block; content: "voir le contenu"; background-position-x: 62px; outline: none; } */ .article-brico-listing .col-md-3 { text-align: right; } @media (max-width: 991px){ .article-brico-listing { text-align: center; } .article-brico-listing .col-md-3 { text-align: center; } .product-description-short-brico-listing { min-height: 0px; margin-top: 10px; margin-bottom: 10px; } .product-price-brico-listing { margin-top: 13px; margin-bottom: 13px; } } .div-categ { height : 110px; position: relative; } .category-name { position: absolute; bottom: 0; right: 0; } .category-name h1 { font-size: 70px; font-family: 'Roboto'; font-weight: 600; color: #b5b5b5; opacity: 0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; margin: initial; line-height: 0.7; } .category-description { position: absolute; bottom: 0; left: 0; } .category-description p { font-size: 45px; font-family: 'Roboto'; font-weight: 600; color: #b5b5b5; opacity: 0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; margin-bottom: 0px; line-height: 0.7; } .category-banniere { border-bottom: 1px solid #404040; margin-bottom: 10px; } .category-image img { width: 100%; height: auto; margin-top: 3px; } @media (max-width: 1199px){ .div-categ { height : 70px; position: relative; } .category-image img { width: auto; height: 70px; margin-top: 1px; } .category-name h1 { font-size: 45px; } .category-description p { font-size: 25px; } } #wrapper.fond-category { padding-top: 20px; background: #FFFFFF; /* Old browsers */ /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f1f1f1 0%,#ffffff 30%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f1f1f1 0%,#ffffff 30%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } .banniere-category { margin-top: 20px; margin-bottom: 20px; border-bottom : 1px solid #404040; } .titre-description-categorie h1 { color : #626568; font-size: 20px; } .description-categorie,.description-categorie p { font-size: 13px; line-height: 13px; } #category #left-column,#cms #left-column { padding-left: 0px; padding-right: 25px; } @media (max-height : 800px ) { .verticalmenu.active-hover .dropdown-menu { max-height: 200px; overflow: scroll; } } .titre-description-categorie { margin-top: 10px; margin-bottom: 20px; } #titre-category{ /*margin-top: 15px;*/ width: 100%; } #bloc-bouton-comparer{ text-align: right; } #bloc-bouton-comparer a { color : #626568; } /*--------- ACCUEIL ---------*/ /*-----*/ #custom-text .col-xl-3,#custom-text .col-xl-6, #custom-text .col-xl-12 { padding: 0px; } .bloc_home_blackfriday { padding: 0 0 15px 0; height: auto; } .bloc_home_blackfriday img { max-width: 100%; max-height: 100%; } @media (max-width: 590px){ .bloc_home_blackfriday small { font-size: 8px; }} .bloc_home_hover-layer_top .bloc_home_text_bold { font-family: 'Roboto'; font-weight: 700; font-size: 18px; margin-bottom: 15px; } .bloc_home_hover-layer_top .bloc_home_text_regular { font-family: 'Roboto'; font-weight: 600; font-size: 13px; } .bloc_home_hover-layer_bottom .bloc_home_text_light { font-family: 'Merriweather'; font-weight: 300; text-transform: uppercase; } .bloc_home_hover-layer_bottom .bloc_home_text_regular { font-family: 'Merriweather'; font-weight: 400; } .bloc_home_hover-layer_bottom .bloc_home_text_bold { font-family: 'Merriweather'; font-weight: 700; text-transform: uppercase; } .bloc_home_hover-layer_bottom .bloc_home_text_extrabold { font-family: 'Merriweather'; font-weight: 800; text-transform: uppercase; } .bloc_home_button { text-transform: uppercase; margin-top: 20px; } .bloc_home_button a{ font-family: 'Roboto'; font-weight: 600; padding: 5px 10px; border-radius: 15px; color : #FFFFFF; } /* BLOC 1 */ /* #bloc_home_1{ color: #FFFFFF; background: #90c796; background-image: url(../img/accueil/Bloc1.jpg); padding: 20px 25px; width: 100%; } #bloc_home_1{ color : #FFFFFF; background: #61d0c4; padding : 25px; width: 100%; } */ #bloc_home_1{ color: #FFFFFF; background: #99CC9D; padding: 30px 13px; width: 100%; height: 320px; } #bloc_home_1 img { margin: 10px 0 10px 0; } .bloc_home_1_text1 { color :#FFFFFF; font-size: 18px; font-family: 'Merriweather'; font-weight: 700; text-transform: uppercase; margin-bottom: 16px; } .bloc_home_1_text2 { color :#FFFFFF; font-size: 16px; font-family: 'Merriweather'; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; } .bloc_home_1_text3 { font-size: 11px; } #bloc_home_1 .bloc_home_hover-layer_top .bloc_home_button a{ background: #90C796; } #bloc_home_1 .bloc_home_hover-layer_bottom .bloc_home_text_light.light1 { line-height: 15px; font-size: 13px; letter-spacing: 18px; } #bloc_home_1 .bloc_home_hover-layer_bottom .bloc_home_text_light.light2 { line-height: 15px; font-size: 15px; letter-spacing: 5px; margin-bottom: 160px; } #bloc_home_1 .bloc_home_hover-layer_bottom .bloc_home_text_bold { line-height: 30px; font-size: 20px; letter-spacing: 6px; margin-top: 30px; } /*#bloc_home_1 .bloc_home_hover-layer_bottom .bloc_home_text_extrabold { line-height: 22px; font-size: 14px; letter-spacing: 4px; } #bloc_home_1 .bloc_home_hover-layer_bottom .img1 { width: 60px; float: left; } #bloc_home_1 .bloc_home_hover-layer_top .img3 { width: 60px; position: absolute; display: block; } #bloc_home_1 .img2 { width: 150px; }*/ #bloc_home_1 .bloc_home_hover-layer_top .bloc_home_text_bold { /*margin-top: 50px;*/ } #bloc_home_1 .bloc_home_hover-layer_top .bloc_home_button a{ background: #61d0c4; } /* BLOC 2 */ #bloc_home_2{ color : #FFFFFF; background: #ffbf4f; padding : 25px; width: 100%; } #bloc_home_2 .bloc_home_hover-layer_bottom .bloc_home_text_light.light1 { line-height: 40px; font-size: 32px; letter-spacing: 4px; margin-top: 10px; } #bloc_home_2 .bloc_home_hover-layer_bottom .bloc_home_text_light.light2 { line-height: 23px; font-size: 18px; letter-spacing: 20px; } #bloc_home_2 .bloc_home_hover-layer_bottom .bloc_home_text_extrabold { line-height: 34px; font-size: 23px; } #bloc_home_2 .bloc_home_hover-layer_bottom i.material-icons { font-size: 36px; } #bloc_home_2 .bloc_home_hover-layer_bottom .img1 { margin-top: 49px; margin-bottom: 20px; width: 75px; } #bloc_home_2 .bloc_home_hover-layer_bottom .img2 { margin-top: 49px; margin-bottom: 20px; width: 75px; } #bloc_home_2 .bloc_home_hover-layer_bottom .img3 { margin-top: 49px; margin-bottom: 20px; width: 75px; } /* BLOC 3 */ #bloc_home_3{ color : #FFFFFF; background: #a5cbdc; padding: 20px; padding-top: 60px; padding-right: 75px; width: 100%; } #bloc_home_3 .bloc_home_hover-layer_bottom .bloc_home_text_light { line-height: 30px; font-size: 25px; letter-spacing: 12px; } #bloc_home_3 .bloc_home_hover-layer_bottom .bloc_home_text_bold { line-height: 38px; font-size: 30px; letter-spacing: 6px; } #bloc_home_3 .bloc_home_hover-layer_bottom .img1 { width: 150px; position: absolute; top: 10px; right: 0px; } /* BLOC 4 */ #bloc_home_4{ color : #FFFFFF; background: #61d0c4; padding : 10px; width: 100%; } #bloc_home_4 .bloc_home_hover-layer_bottom .bloc_home_text_light { line-height: 18px; font-size: 18px; } #bloc_home_4 .bloc_home_hover-layer_bottom .bloc_home_text_extrabold { line-height: 18px; font-size: 18px; } #bloc_home_4 .bloc_home_hover-layer_bottom .img1 { width: 185px; } #bloc_home_4 .bloc_home_hover-layer_top .bloc_home_button a{ background: #61d0c4; } /* BLOC 5 */ #bloc_home_5{ color : #FFFFFF; background: #f6a147; padding : 25px; width: 100%; height : 290px; } #bloc_home_5 .bloc_home_hover-layer_top .bloc_home_text_bold { margin-bottom: 45px; } #bloc_home_5 .bloc_home_hover-layer_top .bloc_home_button a{ background: #f28e24; padding : 5px 15px; } /* BLOC 6 */ #bloc_home_6{ color : #FFFFFF; background: #00547a; padding: 25px; width: 100%; height: 143px; padding-top: 75px; padding-right: 15px; } #bloc_home_6 .bloc_home_hover-layer_bottom .bloc_home_text_light { line-height: 25px; font-size: 17px; margin-left: 70px; } #bloc_home_6 .bloc_home_hover-layer_bottom .bloc_home_text_bold { line-height: 37px; font-size: 19px; letter-spacing: 16px; } #bloc_home_6 .bloc_home_hover-layer_bottom .img1 { position: absolute; top: -3px; left: -15px; width: 160px; } #bloc_home_6 .bloc_home_hover-layer_top .bloc_home_button a{ background: #00547a; } /* BLOC 7 */ #bloc_home_7{ color : #FFFFFF; background: #f7bf53; padding : 15px; width: 100%; } #bloc_home_7 .bloc_home_hover-layer_bottom .bloc_home_text_light { line-height: 22px; font-size: 22px; letter-spacing: 5px; margin-left: 0; margin-top: 16px; } #bloc_home_7 .bloc_home_hover-layer_bottom .bloc_home_text_bold { line-height: 31px; font-size: 17px; } #bloc_home_7 .bloc_home_hover-layer_bottom .bloc_home_text_extrabold { line-height: 37px; font-size: 30px; letter-spacing: 4px; margin-left: 80px; } #bloc_home_7 .bloc_home_hover-layer_bottom .img1 { position: absolute; bottom: 0px; left: -10px; width: 140px; } #bloc_home_7 .verres_trempes_1 a { text-align: center; font-family: 'Merriweather'; font-weight: 700; text-transform: uppercase; font-size: 18px; line-height: 30px; } #bloc_home_7 .verres_trempes_2 a { display: block; width: 200px; text-align: right; font-family: 'Merriweather'; font-weight: 300; font-size: 14px; line-height: 20px; margin: 16px 0 0 50px; } /* BLOC 8 */ #bloc_home_8{ color : #FFFFFF; background: #a5cbdc; padding : 25px; width: 100%; } #bloc_home_8 .bloc_home_hover-layer_bottom .bloc_home_text_light { line-height: 26px; font-size: 21px; letter-spacing: 15px; } #bloc_home_8 .bloc_home_hover-layer_bottom .bloc_home_text_extrabold { line-height: 45px; font-size: 40px; letter-spacing: 14px; } #bloc_home_8 .bloc_home_hover-layer_bottom .img1 { width: 141px; display: inline-block; } #bloc_home_8 .bloc_home_hover-layer_bottom .img2 { width: 140px; display: inline-block; } #bloc_home_8 .bloc_home_hover-layer_bottom .img3 { width: 141px; display: inline-block; } #bloc_home_8 .bloc_home_hover-layer_top .bloc_home_button a{ background : #24aaf8; } /* BLOC 9 */ #bloc_home_9{ color : #FFFFFF; background: #24978b; padding : 25px 25px 100px 25px; width: 100%; } #bloc_home_9 .bloc_home_hover-layer_bottom .bloc_home_text_light { line-height: 31px; font-size: 21px; width: 300px; } #bloc_home_9 .bloc_home_hover-layer_bottom .bloc_home_text_bold { line-height: 31px; font-size: 21px; width: 300px; } #bloc_home_9 .bloc_home_hover-layer_bottom .img1 { position: absolute; top: 0px; left: 0px; width: 100px; } #bloc_home_9 .bloc_home_hover-layer_bottom .img2 { position: absolute; bottom: 0px; right: 0px; width: 320px; } #bloc_home_9 .bloc_home_hover-layer_top .bloc_home_button a{ background: #24978b; } /* BLOC 10 */ #bloc_home_10{ color : #FFFFFF; background: #ffcb8d; padding : 0px; width: 100%; } #bloc_home_10 .bloc_home_hover-layer_bottom .bloc_home_text_light { line-height: 22px; font-size: 17px; letter-spacing: 5px; } #bloc_home_10 .bloc_home_hover-layer_bottom .bloc_home_text_bold { line-height: 31px; font-size: 25px; letter-spacing: 9px; } #bloc_home_10 .bloc_home_hover-layer_bottom .bloc_home_text_extrabold { line-height: 37px; font-size: 32px; letter-spacing: 5px; } #bloc_home_10 .bloc_home_hover-layer_bottom .img1 { float: left; width: 290px; } #bloc_home_10 .bloc_home_hover-layer_top .bloc_home_button a{ background: #ffbf4f; } @media (min-width: 1199px){ #bloc_home_1 { height: 290px; } #bloc_home_1 .bloc_home_hover-layer_bottom .bloc_home_text_bold { margin-top: 20px; } #bloc_home_1 .bloc_home_hover-layer_bottom .bloc_home_text_light.light2 { margin-bottom: 0; } #bloc_home_2 { padding: 25px 22px; width: calc(100% - 8px); } .bloc_home_5_align_right { text-align: right; } .bloc_home_5_align_right .bloc_home_hover-layer_top { text-align: center; } #bloc_home_5 { width: calc(100% - 4px); padding : 25px 19px 25px 0; height: 290px; } #bloc_home_8 { padding: 25px 21px; width: calc(100% - 8px); } #bloc_home_3,#bloc_home_4,#bloc_home_6,#bloc_home_7,#bloc_home_9,#bloc_home_10 { height: 143px; } #bloc_home_9 { padding : 25px 25px 100px 55px; } /* Only for Safari */ _::-webkit-full-page-media, _:future, :root #bloc_home_1,#bloc_home_3,#bloc_home_6,#bloc_home_9 { margin-bottom: 4px; } } @media (max-width: 590px){ #bloc_home_9 .bloc_home_hover-layer_bottom .img2 { /* display: none; */ } } .bloc_home_hover, .bloc_home_hover * { box-sizing: border-box; } .bloc_home_hover { position: relative; display: inline-block; overflow: hidden; max-width: 100%; height: auto; } .bloc_home_hover img { max-width: 100%; } .bloc_home_hover_background { width: 400px; height: 250px; background-size: cover; background-position: center center; background-repeat: no-repeat; } .bloc_home_hover .bloc_home_hover-layer_bottom { display: block; } .bloc_home_hover .bloc_home_hover-layer_top { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); color: #000; padding: 25px; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .bloc_home_hover:hover .bloc_home_hover-layer_top, .bloc_home_hover.active .bloc_home_hover-layer_top { opacity: 1; } .bloc_home_hover .bloc_home_hover-text { text-align: center; font-size: 18px; display: inline-block; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .bloc_home_hover .bloc_home_hover-text_mobile { font-size: 15px; border-top: 1px solid rgb(179, 179, 179); /* for old browsers */ border-top: 1px solid rgba(179, 179, 179, 0.7); margin-top: 5px; padding-top: 2px; display: none; } .bloc_home_hover.active .bloc_home_hover-text_mobile { display: block; } .bloc_home_hover .bloc_home_hover-layer_image { padding: 0; background: none; } /* PAGE ACCUEIL */ .home2019 { font-family: 'Merriweather'; font-weight: 300; text-transform: uppercase; color: #FFF; } .home2019_hover { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); opacity: 0; font-family: 'Roboto'; font-weight: 600; text-transform: none; } .home2019_hover:hover { opacity: 1; transition: .3s ease-in; } .container_home2019 b { font-size: 16px; } /* HOME BLOC 1 */ .home2019_1_out { width: 100%; height: 290px; padding: 0 2px 0 0; } .home2019_1_in { position: relative; width: 100%; height: 100%; background: #99CC9D; } .home2019_1_img { width: 220px; margin-top: 30px; } .home2019_1_text1 { font-size: 32px; letter-spacing: 6px; padding: 20px 0 0 3px; font-weight: 800; } .home2019_1_text2 { font-size: 17px; letter-spacing: 22px; padding: 10px 0 0 22px; } .home2019_1_text3 { font-size: 17px; letter-spacing: 10px; padding: 4px 0 0 10px; } .home2019_1_text4 { font-family: 'Roboto'; font-weight: 400; font-size: 14px; padding: 40px 0 0 0; text-transform: none; } .home2019_hover_1 { text-align: center; font-size: 14px; color: #000; padding: 20px; } .home2019_hover_1 a { display: inline-block; width: 40px; height: 40px; background: #626568; font-family: 'Roboto'; font-size: 24px; font-weight: 600; border-radius: 50%; color: #FFFFFF; margin: 6px; line-height: 40px; } /* HOME BLOC 2 */ .home2019_2_out { width: 100%; height: 290px; padding: 0 2px 0 2px; } .home2019_2_in { position: relative; width: 100%; height: 100%; background: #FFBF4F; } .home2019_2_text1 { height: 86px; font-size: 32px; letter-spacing: 4px; padding: 50px 0 0 4px; } .home2019_2_text2 { font-size: 18px; letter-spacing: 20px; padding: 0 0 0 20px; } .home2019_2_text3 { font-size: 22px; color: #FFF !important; font-weight: 900; padding-top: 6px; } .home2019_2_text3 i { font-size: 36px; } .home2019_2_icons { padding: 30px 0 0 8px; } .home2019_2_icons img { width: 76px; filter: invert(78%) sepia(63%) saturate(5970%) hue-rotate(355deg) brightness(96%) contrast(94%); } .home2019_hover_2 { text-align: center; font-size: 14px; color: #000; padding: 20px; } /* HOME BLOC 3 */ .home2019_3_out { width: 100%; height: 146px; padding: 0 2px 2px 2px; } .home2019_3_in { position: relative; width: 100%; height: 100%; background: #A5CBDC; } .home2019_3_text1 { text-align: left; font-size: 26px; letter-spacing: 8px; padding: 70px 0 0 20px; } .home2019_3_text2 { text-align: left; font-size: 30px; font-weight: 700; letter-spacing: 5px; padding: 14px 0 0 20px; } .home2019_3_img { position: absolute; top: 20px; right: -4px; width: 143px; } .home2019_hover_3 { text-align: center; font-size: 14px; color: #000; padding: 26px; } /* HOME BLOC 4 */ .home2019_4_out { width: 100%; height: 144px; padding: 2px 2px 0 2px; } .home2019_4_in { position: relative; width: 100%; height: 100%; background: #61D0C4; text-align: center; } .home2019_4_img { width: 185px; margin: 8px 0 0 8px; } .home2019_4_text1 { display: inline-block; font-family: 'Merriweather'; color: #FFF; font-size: 18px; font-weight: 300; } .home2019_4_text2 { display: inline-block; font-family: 'Merriweather'; color: #FFF; font-size: 18px; font-weight: 800; } .home2019_hover_4 { padding: 20px; color: #000; } .home2019_hover_4 a { display: block; width: 226px; background: #61D0C4; font-family: 'Roboto'; font-weight: 600; padding: 5px 10px; border-radius: 15px; color: #FFFFFF; margin: 12px auto; text-transform: uppercase; } /* HOME BLOC 5 */ .home2019_5_out { width: 100%; height: 290px; padding: 0 0 0 2px; } .home2019_5_in { position: relative; width: 100%; height: 100%; background: #F6A147; padding: 28px 0 0 0; } .home2019_hover_5 { padding: 30px; color: #000; } .home2019_5_text1 { font-size: 22px; } .home2019_5_text2 { margin-top: 30px; } .home2019_hover_5 a { display: block; width: 160px; background: #F28E24; font-family: 'Roboto'; font-weight: 600; padding: 5px 10px; border-radius: 15px; color: #FFFFFF; margin: 20px auto; text-transform: uppercase; } /* HOME BLOC 6 */ .home2019_6_out { width: 100%; height: 146px; padding: 4px 2px 2px 0; } .home2019_6_in { position: relative; width: 100%; height: 100%; background: #00547A; } .home2019_6_img { position: absolute; top: 0px; left: -10px; width: 160px; } .home2019_6_text1 { display: inline-block; font-family: 'Merriweather'; color: #FFF; font-size: 18px; font-weight: 300; margin: 82px 0 10px 86px; } .home2019_6_text2 { display: inline-block; font-family: 'Merriweather'; color: #FFF; font-size: 18px; font-weight: 600; letter-spacing: 17px; padding-left: 17px; } .home2019_hover_6 { padding: 20px; color: #000; } .home2019_hover_6 a { display: block; width: 160px; background: #00547A; font-family: 'Roboto'; font-weight: 600; padding: 5px 10px; border-radius: 15px; color: #FFFFFF; margin: 10px auto; text-transform: uppercase; } /* HOME BLOC 7 */ .home2019_7_out { width: 100%; height: 144px; padding: 2px 2px 0 0; } .home2019_7_in { position: relative; width: 100%; height: 100%; background: #F7BF53; } .home2019_7_img { float: left; } .home2019_7_text1 { display: block; font-family: 'Merriweather'; color: #FFF; font-size: 21px; font-weight: 600; padding: 10px 0 6px 130px; text-align: left; line-height: 1; } .home2019_7_text2 { display: block; font-family: 'Merriweather'; color: #FFF; font-size: 13px; font-weight: 300; letter-spacing: 3px; text-align: left; padding-left: 132px; } .home2019_7_text3 { display: block; font-family: 'Merriweather'; color: #626568; font-size: 10px; font-weight: 300; letter-spacing: 0px; text-align: center; padding-top: 37px; padding-left: 125px; } .home2019_7_text3 a { display: block; width: 110px; color: #414141; text-decoration: none; background: #FFF; padding: 6px; margin: -20px 0 0 10px; } .home2019_7_text1:hover, .home2019_7_text2:hover { color: #FFF; } /* HOME BLOC 8 */ .home2019_8_out { width: 100%; height: 290px; padding: 4px 2px 0 2px; } .home2019_8_in { position: relative; width: 100%; height: 100%; background: #A5CBDC; } .home2019_8_text1 { font-family: 'Merriweather'; color: #FFF; font-size: 30px; font-weight: 300; padding: 30px 0 0 12px; letter-spacing: 12px; } .home2019_8_text2 { font-family: 'Merriweather'; color: #FFF; font-size: 30px; font-weight: 900; padding: 20px 0 20px 24px; letter-spacing: 24px; } .home2019_8_img1, .home2019_8_img2, .home2019_8_img3 { width: 140px; display: inline-block; } .home2019_hover_8 { padding: 30px; color: #000; } .home2019_hover_8 a { display: block; width: 160px; background: #24AAF8; font-family: 'Roboto'; font-weight: 600; padding: 5px 10px; border-radius: 15px; color: #FFFFFF; margin: 20px auto; text-transform: uppercase; } /* HOME BLOC 9 */ .home2019_9_out { width: 100%; height: 146px; padding: 4px 0 2px 2px; } .home2019_9_in { position: relative; width: 100%; height: 100%; background: #24978B; } .home2019_9_img1 { position: absolute; top: 0; left: 0; width: 130px; } .home2019_9_img2 { position: absolute; bottom: 0; right: 0; width: 322px; } .home2019_9_text1 { font-family: 'Merriweather'; color: #FFF; font-size: 20px; text-align: left; font-weight: 600; padding: 50px 0 0 44px; letter-spacing: 1px; } .home2019_9_text2 { font-family: 'Merriweather'; color: #FFF; text-align: left; font-size: 20px; font-weight: 300; padding: 10px 0 0 44px; } .home2019_hover_9 { padding: 30px; color: #000; } .home2019_hover_9 a { display: block; width: 160px; background: #24978B; font-family: 'Roboto'; font-weight: 600; padding: 5px 10px; border-radius: 15px; color: #FFFFFF; margin: 20px auto; text-transform: uppercase; } /* HOME BLOC 10 */ .home2019_10_out { width: 100%; height: 144px; padding: 2px 0 0 2px; } .home2019_10_in { position: relative; width: 100%; height: 100%; background: #FFCB8D; text-align: left; } .home2019_10_img { width: 296px; float: left; } .home2019_10_text1 { font-family: 'Merriweather'; color: #FFF; font-size: 20px; text-align: left; font-weight: 300; padding: 30px 0 0 0; letter-spacing: 1px; } .home2019_10_text2 { font-family: 'Merriweather'; color: #FFF; text-align: left; font-size: 32px; font-weight: 600; padding: 14px 0 0 44px; letter-spacing: 2px; } .home2019_10_text3 { font-family: 'Merriweather'; color: #FFF; text-align: left; font-size: 22px; font-weight: 600; padding: 14px 0 0 44px; letter-spacing: 8px; } .home2019_hover_10 { text-align: center; padding: 20px; color: #000; } .home2019_hover_10 a { display: block; width: 160px; background: #FFBF4F; font-family: 'Roboto'; font-weight: 600; padding: 5px 10px; border-radius: 15px; color: #FFFFFF; margin: 12px auto; text-transform: uppercase; } @media (max-width: 1199px) { .container_home2019 { padding: 0; margin-top: -3px; } .container_home2019 b { font-size: 13px !important; } .home2019_1_out { height: 256px; } .home2019_1_in { background: #FFBF4F !important; } .home2019_1_img { width: 148px !important; } .home2019_1_text1 { font-size: 18px; font-weight: 800; } .home2019_1_text2 { font-size: 17px; letter-spacing: 7px; padding: 10px 0 0 7px; } .home2019_1_text3 { letter-spacing: 3px; padding-left: 3px; } .home2019_1_text4 { font-size: 12px; } .home2019_hover_1 { padding: 8px !important; font-size: 12px !important; line-height: 1.2; } .home2019_hover_1 a { width: 28px !important; height: 28px !important; line-height: 28px !important; margin: 10px 2px !important; font-size: 10px !important; } .home2019_2_out { height: 256px; padding: 0 0 0 2px !important; } .home2019_2_in { background: #99CC9D !important; } .home2019_2_text1 { font-size: 18px; } .home2019_2_text2 { font-size: 12px; letter-spacing: 11px; padding: 0 0 0 13px; } .home2019_2_text3 { font-size: 13px; } .home2019_2_icons img { width: 44px; filter: invert(50%) sepia(17%) saturate(772%) hue-rotate(75deg) brightness(93%) contrast(91%); } .home2019_hover_2 { font-size: 11px !important; font-weight: 400 !important; line-height: 1.2; padding: 3px !important; } .home2019_3_out { padding: 4px 2px 2px 0 !important; } .home2019_hover_3 { font-size: 12px !important; font-weight: 400 !important; line-height: 1.4; padding: 6px !important; } .home2019_3_img { top: 12px; right: -8px; width: 102px; } .home2019_3_text1 { font-size: 16px !important; letter-spacing: 7px !important; padding: 70px 0 0 10px !important; } .home2019_3_text2 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: 3px !important; padding: 14px 0 0 10px !important; } .home2019_4_out { padding: 2px 2px 0 0 !important; } .home2019_4_img { width: 146px !important; } .home2019_4_text1 { font-size: 14px !important; } .home2019_hover_4 { padding: 8px 0 0 0 !important; font-size: 11px; } .home2019_hover_4 a { width: 136px !important; font-size: 10px !important; padding: 4px !important; margin: 4px auto !important; } .home2019_5_out { padding: 4px 0 0 2px !important; } .home2019_5_in #home_avis_verifie { transform: scale(0.64); margin-left: -55px; margin-top: 60px; } .home2019_hover_5 { padding: 10px !important; } .home2019_hover_5 a { width: 118px !important; } .home2019_6_img { width: 120px !important; } .home2019_6_text1 { margin: 82px 0 4px 0 !important; } .home2019_6_text2 { letter-spacing: 6px !important; padding-left: 6px !important; } .home2019_hover_6 { padding: 6px; font-size: 12px; } .home2019_hover_6 a { width: 130px !important; margin: 4px auto !important; } .home2019_7_img { width: 90px !important; } .home2019_7_text1 { font-size: 18px !important; padding: 8px 0 0 100px; } .home2019_7_text2 { font-size: 12px !important; letter-spacing: 0 !important; position: relative; text-align: center; padding: 0; } .home2019_7_text3 { padding-left: 0 !important; } .home2019_8_out { padding: 4px 0 0 2px !important; } .home2019_9_out { padding: 4px 0 2px 0 !important; } .home2019_10_out { padding: 2px 0 2px 0 !important; } .home2019_8_text1 { font-size: 14px !important; padding: 20px 0 0 8px !important; letter-spacing: 8px !important; } .home2019_8_text2 { font-size: 20px !important; padding: 10px 0 20px 10px !important; letter-spacing: 10px !important; } .home2019_hover_8 { fontsize: 12px !important; padding: 10px !important; } .home2019_hover_8 a { width: 120px !important; } .home2019_hover_9 { padding: 20px !important; } .home2019_9_img2 { width: 230px !important; } .home2019_9_text1 { font-size: 16px !important; padding: 50px 0 0 18px !important; } .home2019_9_text2 { font-size: 16px !important; padding: 10px 0 0 18px !important; } .home2019_10_in { text-align: center !important; padding: 10px !important; } .home2019_10_img { width: 180px !important; float: none !important; } .home2019_10_text_mobile { font-family: 'Merriweather'; color: #FFF; font-size: 14px; font-weight: 300; letter-spacing: 1px; } .home2019_hover_10 { padding: 10px !important; } } /*-----*/ #fond-avantage { position: relative; z-index: 10; border: 1px solid #b5b5b5; } #fond-livraison { position: relative; z-index: 10; background-color: #f1f1f1; text-align: end; } #fond-chiffres-cles { border: 1px solid #b5b5b5; padding : 15px; } #fond-tuto-repa-home { border: 1px solid #b5b5b5; margin-bottom: 15px; } #fond-amazon { border: 1px solid #b5b5b5; } #fond-choisir-ecran { position: relative; z-index: 10; border: 1px solid #b5b5b5; padding: 10px; min-height: 445px; text-align: left; } #fond-ekomi { border: 1px solid #b5b5b5; margin-bottom: 15px; padding-top: 15px; padding-bottom: 15px; } #fond-addition-home { box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.3); margin-bottom: 15px; } #fond-pack { padding: 0px; position: relative; z-index: 10; border: 1px solid #b5b5b5; } .ruban { background: #61d0c4; height: 35px; position: relative; left: -15px; top: 10px; float: left; z-index: 100; color: #ffffff; font-size: 18px; padding-top: 10px; font-weight: 600; width : -webkit-fit-content; width : -moz-fit-content; width : fit-content; text-align: center; padding : 10px; } .ruban_gauche { border-color: transparent #626568 transparent transparent; border-style: solid; border-width: 15px; height: 0px; width: 0px; position: relative; left: -30px; top: 31px; z-index: -1; /*s'affichera sous le rectangle */ } #custom-text .title-avantage-home { color: #626568; font-size: 18px; } #custom-text .img-avantage-home { width: 30px; height: 30px; margin-right: 10px; vertical-align: middle; } #custom-text span { vertical-align: middle; } #custom-text .sous-texte-avantage-home { margin-bottom: 10px; margin-top: 5px; font-weight: 600; font-size: 11px; } #fond-tuto-repa-home img, #fond-addition-home img { width : 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .img-icon-interrogation img { height: 82px; width: 82px; position: relative; left: -30px; top: 10px; float: left; z-index: 10; text-transform: uppercase; color: #ffffff; width: -moz-fit-content; } span.titre-choisir-ecran-accueil { text-align: left; font-size: 22px; font-weight: 600; color: #404040; line-height: 22px; } .img-choisir-ecran-accueil { margin-top: 30px; margin-bottom: 30px; } .img-choisir-ecran-accueil img { max-width: 100%; } .txt-choisir-ecran-accueil { color: #626568; font-size: 15px; margin-top: 10px; margin-bottom: 10px; text-align: center; } .lien-choisir-ecran-accueil { text-align: center; } .lien-choisir-ecran-accueil i { color : #ed0000; font-weight: 600; } .lien-choisir-ecran-accueil a { color: #626568; font-weight: 600; font-size: 15px; } #img-pack img { width : 100%; } #fond-title-pack { color: #FFFFFF; background: #626568; padding : 15px; } .pack-t1 { font-weight: 600; font-size: 35px; line-height: 40px; } .pack-t2 { font-size: 18px; line-height: 23px; font-weight: 600; } .pack-t3 { margin-top: 10px; font-size: 12px; font-weight: 400; } #liste-pack { padding: 10px; text-align: left; } .pack-t4 { font-weight: 600; font-size: 16px; } .pack-t5 { font-size: 14px; margin-top: 20px; } .pack-t6 { font-size: 10px; } @media (max-width: 991px) { .ruban { font-size: 15px; } #fond-avantage, #fond-livraison, #fond-amazon, #fond-chiffres-cles { margin-bottom: 15px; } } @media (min-width: 991px) { #fond-choisir-ecran { min-height: 445px; } #fond-tuto-repa-home { margin-bottom: 12px; } #fond-pack { min-height: 153px; } #fond-title-pack { min-height: 151px; } } .home-menu .title_block.verticalmenu-button { display: none; } .home-menu { z-index: 50; padding-left: 0px !important; margin-top: 19px; } #custom-text, #custom-text .container-fluid { padding : 0px; padding-top: 15px; } /*--------- TUTORIELS ---------*/ .pi_title { display: block; float: left; width: 600px; color: #626568; font-family: 'Roboto'; font-size: 18px; margin: 20px 0 20px 20px; } #tutos_frame { position: relative; float: left; width: 1130px; min-height: 800px; background: #FFF; margin: 20px 0 200px -20px; } .tutos_device { position: relative; z-index: 2; float: left; width: 206px; height: 248px; border: 1px solid #B5B5B5; margin: 0 20px 20px 0; text-align: center; } .tutos_device:hover { border: 1px solid #61D0C4; cursor: pointer; } .tutos_device img { width: 204px; height: 204px; } .bottom_ban { position: absolute; bottom: 0; left: 0; width: 204px; height: 40px; background: #F1F1F1; font-family: 'Roboto'; color: #B5B5B5; line-height: 40px; } .bottom_ban:hover { background: #61D0C4; } .bottom_mask { position: absolute; z-index: 1; bottom: -181px; left: 0; width: 204px; height: 180px; background: #FFF; } .bottom_menu { position: absolute; z-index: 0; bottom: -181px; left: 0; width: 204px; height: 180px; background: #FFF; padding: 10px 10px 10px 20px; border-top: 1px solid #B4B4B4; } .bottom_menu ul { display: block; float: left; width: 174px; text-align: left; font-family: 'Roboto'; color: #B5B5B5; cursor: default; list-style-type: none; } .bullet { display: block; float: left; width: 10px; height: 26px; line-height: 20px; font-family: 'Chalkboard'; font-size: 18px; margin-right: 10px; } .bullet1 { color: #626568; } .bullet0 { color: #B5B5B5; } .bottom_menu ul li a, .nolink { display: block; float: left; width: 154px; height: 26px; line-height: 26px; font-family: 'Roboto'; font-size: 16px; color: #626568; } .bottom_menu ul li a:hover { color: #61D0C4; } .nolink { color: #B5B5B5; } .nouveaux_tutos_titre { position: relative; z-index: 1; background: #F1F1F1; padding: 15px; color: #626568; font-size: 22px; font-weight: 600; line-height: 26px; } .nouveaux_tutos_titre-ombre { border-color: transparent #626568 transparent transparent; border-style: solid; border-width: 15px; height: 0px; width: 0px; position: relative; left: -30px; bottom: 0; z-index: 1000; } .nouveaux_tutos_caracteristiques-fond { height: 60px; border: 3px solid #F1F1F1; } .nouveaux_tutos_caracteristiques { height: 57px; padding: 12px 0 0 20px; } @media (max-width: 1199px) { .nouveaux_tutos_caracteristiques { font-size: 11px; } } .nouveaux_tutos_trianglegris { position: relative; float: left; width: 0; height: 0; border-color: transparent transparent transparent #F1F1F1; border-style: solid; border-width: 13px; top: 4px; left: -20px; } .fond-marque-temps-tuto, .fond-outils-etape-tuto{ position: relative; z-index: 10; } .fond-titre-tuto { background : #f1f1f1; min-height: 125px; padding : 20px; } .img-tuto-photo { width : 100%; height: auto; border : 1px solid #b8b8b8; } .titre-etape-tuto { display: table; width: 100%; background: #F1F1F1; font-size: 20px; padding: 5px 5px 5px 0; margin-bottom: 15px; margin-top: 55px; overflow: auto; } .titre-etape-tuto div { display: table-cell; width: 100%; height: 48px; vertical-align: middle; } .texte-etape-tuto { font-size: 14px; text-align: justify; padding: 15px; margin-bottom: 15px; } .fond-produit-tuto{ background : #f1f1f1; padding-left: 0px; } .titre-produit-tuto{ font-size : 12px; font-weight: 600; margin-top: 25px; min-height: 95px; } .prix-produit-tuto { font-weight: 400; font-size : 24px; color : #61d0c4; margin-bottom: 10px; } .button-produit-tuto { float: left; padding: 15px; background-size: 25px; background-image: url(../img/icon-panier/panier-options-blanc.svg); background-repeat: no-repeat; background-position: center; background-color: #61d0c4; border-radius: 5px; box-shadow: 2px 2px 11px 0 rgba(0,0,0,.1); margin-right: 5px; } .button-produit-tuto:hover,.button-produit-tuto:focus{ background-image: url(../img/icon-panier/panier-options-gris.svg); } .image-produit-tuto { margin-top:25px; width : 100%; border : 1px solid #b8b8b8; } .panier-produit-tuto { display: block; height: 32px; font-size : 14px; font-weight: 400; color : #61d0c4; } @media (max-width: 767px) { .panier-produit-tuto { line-height: 32px; } } .gamme-produit-tuto { background: #dcdcdc; text-align: center; font-size: 16px; line-height: 32px; text-decoration: underline; color: #404040; font-weight: 600; } .video-tuto{ width : 100%; height : 500px; margin-top: 35px; } .photo-principal { margin-bottom: 20px; } .img-mini { opacity: 0.6; } .img-mini:hover { opacity: 1; cursor: pointer; } .image-tuto-mask { /* filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); */ opacity: 1; } .liste-kit-outil { text-align: center; margin-top: 20px; } .photo_outil_option { text-align: center; padding: 15px 30px; } .photo_outil_option a { display: block; } .photo_outil_option img { width: 75px; height: auto; } .bandeau-social-print-tuto{ background : #61d0c4; height: 40px; line-height: 40px; margin-top: 40px; margin-bottom: 10px; /* padding: 12px 10px 10px 10px; */ text-align: center; color: #FFF; font-size: 15px; font-weight: 600; } .tuto-title-brico-listing a { font-family: 'Roboto'; font-weight: 600; color: #626568; } .tuto-brico-listing { border: 1px solid #b5b5b5; margin-bottom: 10px !important; padding: 10px; } .tuto-brico-listing .btn.add-to-cart.button-produit-tuto { margin-left: 10px; } .tuto-price-brico-listing{ color : #61d0c4; font-family: 'Roboto'; font-weight: 600; } @media (min-width: 768px){ .list_repa .col-md-6 { padding-right : 0px; } .tuto-photo-contenu{ padding-left: 0px; padding-right: 0px; } } @media (max-width: 768px){ .fond-titre-tuto { min-height: initial; text-align: center; } #tuto-vente .col-md-4{ margin-bottom: 20px; } .titre-produit-tuto { margin-top: 66px; min-height: 60px; } .tuto-outils-photo{ padding: 0px; } .photo_outil_option { width: 50%; float: left; } } @media (min-width: 768px) { .row-tuto-etape { margin-left: 0; } } @media (max-width: 767px) { .pastille-container { left: 15px !important; } .tuto-photo-pastille-petite { width: 10px !important; height: 10px !important; margin: -5px 0 0 -5px !important; } } .tuto-photo-pastille-petite { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 1px solid #000; border-radius: 50%; opacity: 1; transition: 1s ease-in-out; } .tuto-photo-pastille-petite img { vertical-align: top; } .tuto-photo-pastille-grande { position: absolute; width: 200px; height: 200px; border: 10px solid #000; border-radius: 50%; margin: -100px 0 0 -100px; opacity: 0; transition: 1s ease-in-out; } #module-bricophonetutos-pics h2, #module-bricophonetutos-video h2, #module-bricophonetutos-3d h2 { font-size: 22px; line-height: 30px; } /*--------- PANIER ---------*/ .product-line-grid-right .bootstrap-touchspin { box-shadow: none; } div#payWithAmazonMainDiv { display: inline-block; width: 48%; text-align: center; float: left; border: 1px solid #666; margin-bottom: 6px; border-radius: 4px; padding-top: 7px; } #payWithAmazonDiv { margin-top: 0 !important; } #header .header-nav .blockcart .header:hover, #header .header-nav .blockcart .header:focus,#header .header-top .blockcart .header:hover, #header .header-top .blockcart .header:focus, #_desktop_cart:hover, #_desktop_cart:focus { cursor: pointer; } .body.cart-hover-content:hover,.body.cart-hover-content:focus { cursor: initial !important; } /* .cart-hover-content { display: none; font-family: 'Roboto'; background: #FFFFFF; position: absolute; z-index: 200; top: 50px; right: 15px; width: 280px; padding: 10px; white-space: initial; color: #000000; border: 1px solid #b5b5b5; box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.3); } #_desktop_cart b { margin-left: 5px; margin-right: 5px; } .header-top .cart-hover-content { top: 40px; right: 0px; overflow-y: auto; overflow-x: hidden; max-height: 570px; } .header-top .cart-hover-content .col-xs-2,.header-top .cart-hover-content .col-xs-3,.header-top .cart-hover-content .col-xs-7 { padding-right: 10px; padding-left: 10px; } .header-top #cart-word { display : none; } #cart-subtotal-discount .label, #cart-subtotal-discount .value { color : #61d0c4; font-weight: 600; line-height: 40px; } .block-promo .cart-summary-line .label, .block-promo .promo-name{ color : #61d0c4; } #blockcart-modal .product-name { color : #61d0c4; } .product-line-grid-left img { max-width: 50%; } #header .header-top .cart-preview.inactive .cart-hover-content { display : none!important; } .header-top .blockcart { padding: 8px; text-align: center; white-space: nowrap; background: #ffffff; } .header-top #_desktop_cart { float : right; padding: 0px; margin-right: 0px; margin-left: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid #f1f1f1; } */ @media (min-width: 992px){ } .sticky { position: fixed !important; top: 0; z-index: 90; } #cart_word { display : block; } .cart-product-img img { width: 100%; } article.cart-product { margin-bottom: 10px; } .cart-products { text-align: left; } .cart-product-price { color: #61d0c4 !important; text-align: left; font-weight: 600; margin-top: 10px; } #header .header-nav .cart-product-removefromcart i:hover,#header .header-top .cart-product-removefromcart i:hover,#header .header-nav .cart-product-removefromcart i:focus,#header .header-top .cart-product-removefromcart i:focus { color: #61d0c4 !important; } .cart-wishlist-checkout,.cart-wishlist-viewcart { padding: 5px; background: #61d0c4; display: block; font-size: 14px; font-family: 'Roboto'; font-weight: 600; margin-top: 5px; } .cart-wishlist-action a{ color : #FFFFFF !important; } .cart-subtotals span.value, .cart-total span.value { color: #61d0c4; } .cart-total { display: block; height: 20px; font-weight: 600; } .cart-total span.value { float : right; } .cart-total span.label { float : left; } #header .header-top .cart-preview { padding: 10px; text-align: center; white-space: nowrap; height: 40px; margin-left: 0px; } #header .header-nav .cart-preview.active .cart-hover-content .cart-wishlist-action a { color : #FFFFFF; } #header .header-nav .cart-preview.active .cart-hover-content a,#header .header-nav .cart-preview.active .cart-hover-content i { color : #404040; } /* #header .header-nav .blockcart { height:48px; height: 3rem; padding:12px; padding: .75rem; margin-left:15px; margin-left: .9375rem; } */ #header .header-nav .blockcart .header { margin-top: initial; } #header .header-top .blockcart { padding: 10px; text-align: center; white-space: nowrap; height: 40px; margin-left: 0px; width : 180px; } #header .cart-product-title a { display: inline; } .cart-wishlist-action a { padding: 7px !important; } .mm_extra_item .cart-preview a { padding: 0px; } .mm_menu_content_title .mm_arrow { display : none; } .mm_menu_content_title { text-transform: uppercase; } #header .header-top .blockcart { padding: 15px; text-align: center; white-space: nowrap; height: 50px; margin-left: 0px; width: 180px; } @media (max-width: 767px) { .header-top .cart-hover-content { top: 50px; } #header .header-top .blockcart { width: 50px; } } span.cart-products-count { vertical-align: middle; } #checkout .vivawallet_description { background: #FFF; padding: 20px 10px 4px 10px; border-radius: 12px; } #checkout .vivawallet_description p { font-weight: 600; } #checkout .vivawallet_description ul { list-style-type: square; margin-left: 32px; } #payment-option-5-additional-information a,#payment-option-6-additional-information a { color : #61d0c4; } #payment-option-5-additional-information a:hover,#payment-option-5-additional-information a:focus,#payment-option-6-additional-information a:hover,#payment-option-6-additional-information a:focus { cursor: pointer; color : #00ac9f; } .js-terms a { color : #61d0c4; } .js-terms a:hover,.js-terms a:focus { color : #00ac9f; } .cart-grid-body a.label:hover,.cart-grid-body a.label:focus { color : #61d0c4; } /*--------- SEARCHBAR ---------*/ .search-widget form input[type=text] { border: none; padding-left : 0px; padding-top: 5px; padding-bottom: 5px; padding-right: 30px; min-width: 255px; background: none; color: #404040; border-bottom: 1px solid #b5b5b5; font-size: 22px; } .search-widget form input[type=text]::-webkit-input-placeholder{ color : #b5b5b5; } .search-widget form input[type=text]::-moz-placeholder{ color : #b5b5b5; } .search-widget form input[type=text]:-ms-input-placeholder{ color : #b5b5b5; } .search-widget form input[type=text]::placeholder{ color : #b5b5b5; } .search-widget form button[type=submit] { position: absolute; background: none; border: none; bottom: 0px; right: 0px; color: #61d0c4; } .search-widget form button[type=submit]:focus { outline: none; } .search-widget form input[type=text]:focus { outline: 0px solid #2fb5d2; color: #414141; background: none; } .header-nav #search_widget { margin-top: 15px; } .header-top #search_widget { margin-top: 0px; } .searchbar-mobile { display : none; background: #FFF; padding-bottom: 11px; } .searchbar-mobile #search_widget { width: 100%; } .searchbar-mobile .search-widget form input[type=text] { border: none; padding-left : 0px; padding-top: 5px; padding-bottom: 5px; padding-right: 30px; width: 100%; background: none; color: #404040; border-bottom: 1px solid #b5b5b5; font-size: 22px; } .searchbar-mobile form { margin: 10px; } @media (min-width: 768px) { .header-top #search_widget, #iconsearchbarmobile, .header-top .mm_display_search_default { display : none; } } @media (max-width: 767px){ .header-top #search_widget form { display : none; } #iconsearchbarmobile { display: none; } .header-top #iconsearchbarmobile { display : block; margin-top: 13px; color: #61d0c4; } .header-top #search_widget:hover,.header-top #search_widget:focus { cursor: pointer; } .header-top #search_widget:hover #iconsearchbarmobile,.header-top #search_widget:focus #iconsearchbarmobile { color: #00ac9f; } .header-top .search-widget { background: #FFFFFF; border-bottom: 1px solid #F1f1f1; border-top: 1px solid #f1f1f1; margin-left: 0px !important; padding-left: 12px!important; width: 50px; height: 52px; border-left: 1px solid #f1f1f1; } .header-top .mm_custom_text { background: #FFF; width: 50px; border: 1px solid #F1F1F1; margin-right: -1px; text-align: center; } .header-top .mm_custom_text i { color: #61D0C4; } .sw-mobile { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; } } /*--------- LEO MEGAMENU ---------*/ /* .leo-verticalmenu .title_block { background: #61d0c4; } .leo-verticalmenu .title_block:hover { cursor:pointer; } .leo-verticalmenu .box-content { background: #FFFFFF; } span.hasicon.menu-icon-class { display: block; padding-left: 0px; padding-bottom: 5px; } .leo-verticalmenu .leo-widget .menu-title { background-color: #f1f1f1; text-align: center; padding: 5px; text-transform: uppercase; } .leo-verticalmenu .megamenu > .brico-titre-menu-mea > a span { text-transform: initial; font-weight: 600; font-size: 15px; color: #404040; } .leo-verticalmenu .megamenu > .brico-titre-menu-mea-last > a { text-transform: initial; font-weight: 600; font-size: 15px; color: #404040; border-bottom: 1px solid #f1f1f1; } .leo-verticalmenu .megamenu > li > a span { text-transform: initial; font-weight: 400; font-size: 13px; color: #626568; } .leo-verticalmenu .megamenu > li.dropdown > .caret { line-height: 30px; } .leo-verticalmenu .megamenu > li > a { padding: 6px 20px 0px 10px; } .leo-verticalmenu .megamenu li { border-bottom: 0px; } .leo-verticalmenu .megamenu > li.dropdown > .caret:before { content: "keyboard_arrow_right"; } #header .header-top { background : #f1f1f1; width : 100%; z-index: 90; } #header .header-top .leo-top-menu .horizontal li a { color: #404040; } #header .header-top .position-static { padding-top: 0px; } @media (max-width: 991px) { .leo-verticalmenu.active .megamenu > li.dropdown > .caret { top: 2px; } .bricophone-vertical-menu { margin-bottom: 5px; } } .leo-megamenu .navbar-toggler { margin-bottom: 5px; margin-top: 5px; } .bricophone-horizontal-menu { justify-content: flex-end; } .leo-verticalmenu { padding-right: 15px; padding-left:15px; } .bricophone-vertical-menu .box-content.block_content { width: calc(100% - 30px); } ul.nav.navbar-nav.megamenu.vertical.right{ border-right: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; border-left: 1px solid #b7b7b7; } .home-menu .box-content.block_content { width: calc(100% - 25px)!important; } .leo-widget .widget-links .widget-inner a:hover,.leo-widget .widget-links .widget-inner a:focus{ color: #61d0c4; padding-left: 5px; } .leo-verticalmenu .leo-widget .menu-title,.leo-verticalmenu .dropdown-menu-inner .menu-title:hover,.leo-verticalmenu .dropdown-menu-inner .menu-title:focus { color: #61d0c4; } .leo-widget .widget-links .widget-inner li { padding: 3px; } #header .header-top .leo-top-menu .horizontal li a:hover { background: none; } /*--------- MEGA MENU PRO ---------*/ /* #header .header-nav { border-bottom: 2px solid transparent; max-height: 100px; margin-top: 6px; margin-bottom: 0px; } .header-top { height: 44px; background: #f1f1f1; } .ets_mm_megamenu { z-index: 100; height : 42px; margin-top: 0px; } .mm_menus_li > a { text-transform: none; } .ets_mm_block_content a { line-height: 25px; } .mm_menus_li .mm_menu_content_title span { vertical-align:bottom; } .mm_menus_li_tab .mm_menu_content_title span { vertical-align:inherit; } .layout_layout1 .ets_mm_megamenu_content { border-bottom: none; border-top: none; } @media (min-width: 768px){ #header .layout_layout1 .ets_mm_block_content a:hover,#header .layout_layout1 .ets_mm_block_content a:focus { padding-left: 5px; color : #61d0c4; } .mm_menus_li { float : right; height: 42px; } .mm_menus_li_tab { float : left; height: 100%; } .scroll_heading .mm_menus_li_tab { margin-left: 0px; } .scroll_heading ul.mm_columns_ul.mm_columns_ul_tab { left : 15px; } .mm_menu_content_title { display: inline-block; float: left; padding: 12px 8px; position: relative; } #header .header-top .blockcart { padding: 0px; text-align: center; white-space: nowrap; height: 42px; margin-left: 0px; width: 188px; } #header .header-top .blockcart .header { padding: 10px; } .ets_mm_megamenu { padding-right: 15px; padding-left: 15px; } .scroll_heading ul.mm_menus_ul { margin-left: 15px; } .mm_tab_li_content { border-left : 1px solid #b7b7b7; border-right : 1px solid #b7b7b7; border-bottom : none; border-top : none; } .mm_tabs_li .mm_columns_contents_ul { border: 1px solid #b7b7b7; } } .mm_columns_ul .mm_tabs_li .mm_tab_name { font-size: 13px; color : #626568 ; } .mm_columns_ul .mm_tabs_li:nth-child(-n+5) .mm_tab_name,.mm_columns_ul .mm_tabs_li:nth-last-child(-n+2) .mm_tab_name { font-weight: 600; color : #404040; font-size: 15px; } .mm_columns_ul .mm_tabs_li:nth-child(-n+5) .mm_tab_has_child::after { border-right: 2px solid #404040; border-top: 2px solid #404040; } .mm_tabs_li.open:nth-child(-n+4) .mm_tab_has_child::after { border-right: 2px solid #61d0c4; border-top: 2px solid #61d0c4; } .mm_columns_ul .mm_tabs_li:nth-child(5) .mm_tab_name { border-bottom : 1px solid #f1f1f1; } .mm_columns_ul .mm_tabs_li:nth-last-child(2) .mm_tab_name { border-top : 1px solid #f1f1f1; } .mm_tabs_li.open .mm_tab_has_child::after { border-right: 1px solid #61d0c4; border-top: 1px solid #61d0c4; } .mm_tab_toggle_title { height: 42.6px; line-height: 18px; } .mm_tab_toggle_title img { vertical-align: -5px; } .mm_tabs_li:last-child .mm_tab_li_content{ border-bottom : 1px solid #b7b7b7; } @media (max-width: 767px){ .mm_tabs_li .mm_columns_contents_ul { border: none; } } @media (max-width: 768px){ ul.mm_columns_contents_ul { background-image : none !important; } } .ets_mm_block > .ets_mm_block_old_h4 { border-bottom: none; background: #f1f1f1; color: #61d0c4 !important; padding-bottom: 0px; font-weight: bold; line-height: 110%; margin-bottom: 10px; margin-top: 0; text-transform: uppercase; } .mm_extra_item .cart-preview.inactive .header { padding: 0; } .mm_extra_item { padding-right: 0px; } .mm_menus_forward_icon { border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; display: inline-block; height: 11px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); width: 11px; } .ets_mm_block_content br { display: block; content: ""; margin-top: -5px; } .scroll_heading .mm_extra_item.mm_display_search_default { //margin-right: 15px; } /*--------- NAVBAR ---------*/ /* .nav2 { border-left: 1px solid #b5b5b5; padding-left: 25px; } @media (max-width: 768px){ .header-top #_desktop_cart { display: initial; } #header { background: #FFFFFF; } #header .logo { max-height: 30px; text-align: center; margin-bottom: 4px; } .header-banner { font-size: 14px; line-height: 20px; padding: 6px 0; } div#search_widget { margin-top: 20px; } .nav2 { padding-left: 5px; } } @media (max-width: 767px){ #header .header-nav { margin-top: -2px; margin-bottom: 0px; max-height: 90px; } } #header .header-nav .user-info { margin-left: 0px; margin-top: 10px; text-align: left; white-space: nowrap; } #header .header-nav .user-info .account { margin-left: 0; } #header .header-nav #contact-link { margin-left: 0px; margin-top: 10px; text-align: left; white-space: nowrap; } #header .header-nav { padding-top: 10px; padding-bottom: 10px; } #header .header-nav .nav2 i { color : #636669; margin-right: 5px; } #header .header-nav .nav2 a { color : #404040; font-weight: 600; } #header .header-nav .nav2 a:focus,#header .header-nav .nav2 a:hover { color: #61d0c4; } /*--------- FOOTER ---------*/ .footer-container .container{ background-color: #f1f1f1; } .bandeau-banque-transport{ background-color : #FFFFFF; text-align: center; } .title-footer { font-size: 13px; font-weight: 600; margin-bottom: 15px; } .content-footer a,.content-footer li a,.footer-copyright a { color: #626568; font-size: 13px; } .content-footer a:hover,.content-footer a:focus,.content-footer li a:hover,.content-footer li a:focus,.footer-copyright li a:hover,.footer-copyright li a:focus { color: #61d0c4; } .content-footer li { margin-bottom: 12px; } .footer-copyright{ padding-top: 15px; padding-bottom: 15px; text-align: center; } .row.liste-icon-footer { text-align: center; font-size: 12px; } .liste-icon-footer a { color : #61d0c4; } .liste-icon-footer a:hover,.liste-icon-footer a:focus { color : #61d0c4; } #footer-diag, #footer-sav, #footer-nouveautes, #footer-modele,#footer-partenaire, #footer-rachat, #footer-sim {position:relative; } #footer-diag a, #footer-nouveautes a,#footer-partenaire a, #footer-rachat a, #footer-sim a {position:absolute; top:0px;margin-top:10px; left:0; opacity:0;z-index: 50;} #footer-sav a, #footer-modele a {position:absolute; margin-top:5px;top:0px; left:0; opacity:0;z-index: 50;} #footer-diag:hover .icon-footer-diag {opacity:0;} #footer-diag:hover a {opacity:1;} #footer-sav:hover .icon-footer-sav {opacity:0;} #footer-sav:hover a {opacity:1;} #footer-nouveautes:hover .icon-footer-nouveautes {opacity:0;} #footer-nouveautes:hover a {opacity:1;} #footer-modele:hover .icon-footer-modele {opacity:0;} #footer-modele:hover a {opacity:1;} #footer-partenaire:hover .icon-footer-partenaire {opacity:0;} #footer-partenaire:hover a {opacity:1;} #footer-rachat:hover .icon-footer-rachat {opacity:0;} #footer-rachat:hover a {opacity:1;} #footer-sim:hover .icon-footer-sim {opacity:0;} #footer-sim:hover a {opacity:1;} .table-icon-footer td a { display:block; width:100%; height:100%; font-weight: bold } .table-icon-footer { width: 100%; margin-top: 30px; } .table-icon-footer { width : 100%; } #social-footer { border-right: 1px solid #b5b5b5; } #social-footer li { display: inherit; margin: auto; margin-bottom: 13px; } @media (max-width: 768px){ #social-footer li { display: inline-block; margin-right: 15px; } #social-footer ul { text-align : center; } } .title-footer-mobile { border-top: 1px solid #F1F1F1; padding: 8px 0 8px 0; color: #61D0C4; } .title-footer-mobile i { float: right; margin: -3px 6px; } .content-footer-mobile { display: none; padding: 15px 0; } @media (min-width: 1200px) { .block_newsletter, .footer_background { width: 100vw; margin-left: calc((100vw - 1110px)/ 2 * -1); margin-right: calc((100vw - 1110px)/ 2 * -1); background: #F1F1F1; } .footer_center { max-width: 1140px; margin: 0 auto 30px; } } /*--------- MON COMPTE ---------*/ .page-my-account #content .links a:hover,.page-my-account #content .links a:focus { color : #61d0c4; } .page-my-account #content .links a:hover i,.page-my-account #content .links a:focus i{ color : #61d0c4; } #lcp_customer_helpdesk_a { display: none !important; } /*--------- RESET PASSWORD ---------*/ @media (max-width: 768px){ #password .form-control-label { width: 100%; text-align: left; } #password .email { width: 100%; padding-bottom: 10px; } #password .form-control-submit { width: 100%; font-size: 15px; } .renew-password [type=submit] { margin-left: inherit; } } /*--------- PANIER ---------*/ .product-line-grid-right .bootstrap-touchspin { box-shadow: none; } a.text-uppercase.opartDevisCartToQuotationLink { display: inline-block; float: right; font-weight: 700; font-size: 12px; color: #626568; } a.text-uppercase.opartDevisCartToQuotationLink:hover,a.text-uppercase.opartDevisCartToQuotationLink:focus { color : #61d0c4; } /*--------- BLOC NEWSLETTER ---------*/ .block_newsletter p { padding-top: 13px; margin-bottom: 0px; font-size: 14px; } .block_newsletter { background: #f1f1f1; padding: 15px; } .block_newsletter form input[type=text] { background: #FFFFFF; } .block_newsletter form input[type=text]:focus { border: 2px solid #61d0c4; } @media (max-width: 768px){ .block_newsletter form { margin-top: 15px; } } /*--------- DIVERS ---------*/ @media (max-width: 991px){ #scroll_to_top .material-icons { font-size : 35px; } } #scroll_to_top { z-index: 9997; position: fixed; bottom: 15px; left: 15px; cursor: pointer; display: none; color: #61d0c4; background: #f1f1f1; border-radius: 50%; } .animationload { background-color: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; display: none; } .ispinner { left: 50%; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; width: 20px; height: 20px; } .ispinner .ispinner__blade { position: absolute; left: 44.5%; top: 37%; width: 10%; height: 25%; border-radius: 50%/20%; animation: iSpinnerBlade 1s linear infinite; animation-play-state: paused; } .ispinner .ispinner__blade:nth-child(1) { animation-delay: -1.6666666667s; transform: rotate(30deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(2) { animation-delay: -1.5833333333s; transform: rotate(60deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(3) { animation-delay: -1.5s; transform: rotate(90deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(4) { animation-delay: -1.4166666667s; transform: rotate(120deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(5) { animation-delay: -1.3333333333s; transform: rotate(150deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(6) { animation-delay: -1.25s; transform: rotate(180deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(7) { animation-delay: -1.1666666667s; transform: rotate(210deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(8) { animation-delay: -1.0833333333s; transform: rotate(240deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(9) { animation-delay: -1s; transform: rotate(270deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(10) { animation-delay: -0.9166666667s; transform: rotate(300deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(11) { animation-delay: -0.8333333333s; transform: rotate(330deg) translate(0, -150%); } .ispinner .ispinner__blade:nth-child(12) { animation-delay: -0.75s; transform: rotate(360deg) translate(0, -150%); } .ispinner.ispinner--animating .ispinner__blade { animation-play-state: running; } .ispinner.ispinner--white .ispinner__blade { background-color: white; } .ispinner.ispinner--gray .ispinner__blade { background-color: #8c8c8c; } .ispinner.ispinner--large { width: 35px; height: 35px; } .ispinner.ispinner--large .ispinner__blade { width: 8.5714285714%; height: 25.7142857143%; border-radius: 50%/16.67%; } @keyframes iSpinnerBlade { 0% { opacity: 0.85; } 50% { opacity: 0.25; } 100% { opacity: 0.25; } } /*--------- MODAL ---------*/ #blockcart-modal .modal-header { background: #61d0c4; } #blockcart-modal .modal-body { background: #FFF; }/* .modal-content .material-icons { display: none !important; }*/ /*--------- RENEW PASSWORD ---------*/ .renew-password { margin-top: 15px; text-align: center; color: #61d0c4; font-weight: 600; } body#checkout section.checkout-step .forgot-password { margin-left: 0px; } @media (max-width: 991px) { #blockcart-modal .product-image { width: 100%; display: block; max-width: 120px; margin: 0 auto .9375rem; } } /*--------- LIVRAISONS ---------*/ .livraison_dest_title { width: 100%; height: 54px; background: #F1F1F1; line-height: 52px; color: #626568; font-size: 22px; margin: 20px 0; } .livraison_line { min-height: 100px; padding-top: 15px; border-top: 1px solid #B5B5B5; overflow: auto; } .livraison_line:first-child { border: none; } @media (max-width: 767px) { .livraison_dest_title { font-size: 15px; } .livraison_line { padding-bottom: 12px; } .livraison_linetext { font-size: 10px; } } /*--------- QUI SOMMES NOUS / A PROPOS ---------*/ #qui_sommes_nous_maintitle { width: 100%; min-height: 120px; background: #F1F1F1; padding: 20px 50px 20px 20px; font-size: 18px; color: #404040; font-weight: 800; line-height: 1.1; text-align: left; } .qui_sommes_nous_gb_frame { position: relative; height: 36px; z-index: 10; margin-top: 15px; left: -30px; } .qui_sommes_nous_gb { position: relative; float: left; z-index: 2; width: fit-content; height: 36px; padding: 10px 30px; background: #61D0C4; top: 0; left: 0; color: #FFF; font-size: 16px; text-align: left; } .qui_sommes_nous_grey_trgl { position: relative; top: 21px; left: -15px; width: 0; height: 0; border-color: transparent #626568 transparent transparent; border-style: solid; border-width: 15px; } .qui_sommes_nous_title { width: 100%; height: 54px; background: #F1F1F1; line-height: 52px; color: #626568; font-size: 22px; margin-top: 20px; } .qui_sommes_nous_avatar { width: 100%; height: auto; border: 1px solid #61D0C4; margin: 12px; background: #F1F1F1; } .qui_sommes_nous_avatar img { width: 100%; height: auto; } .qui_sommes_nous_avatar_name { display: block; margin: 0; width: 100%; height: 29px; background: #61d0c4; color: #FFF; text-align: center; line-height: 30px; } .qui_sommes_nous_avatar_function { display: flex; flex-direction: column; justify-content: center; margin: 0; width: 100%; height: 60px; color: #61D0C4; font-size: 14px; text-align: center; } /*--------- TUTORIELS ACCUEIL (TUTOS_HOME) ---------*/ .tutos_marquesseries_bloc { padding-right: 0; margin-bottom: 30px; } @media (max-width: 991px) { .tutos_marquesseries_bloc { padding: 0; } } .tutos_home_device { position: relative; z-index: 1; width: 100%; height: 280px; border: 1px solid #B5B5B5; text-align: center; background: #FFF; overflow: hidden; } .tutos_home_device:hover { border: 1px solid #61D0C4 !important; cursor: pointer; } .tutos_home_device:hover .tutos_home_submenu_btn { background-color: #61D0C4 !important; } .tutos_home_device:hover .tutos_home_submenu_mask { border-top: 1px solid #61D0C4 !important; } .home_tutos_2023 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 30px; } .home_tutos_2023_bloc { flex-basis: calc(50% - 15px); display: grid; grid-template-columns: 120px calc(100% - 120px); grid-template-rows: 40px 1.4fr; gap: 0px 0px; grid-template-areas: "logo name" "logo series"; margin-bottom: 40px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .home_tutos_2023_bloc .logo { grid-area: logo; width: 120px; border-right: 1px solid #61D0C4; } .home_tutos_2023_bloc .logo img { width: 100px; margin: 10px; } .home_tutos_2023_bloc .name { grid-area: name; padding: 10px; border-bottom: 1px solid #61D0C4; } .home_tutos_2023_bloc .name h2 { font-size: 16px; } .home_tutos_2023_bloc .series { grid-area: series; padding: 15px 50px 20px 40px; } .home_tutos_2023_bloc .series li { list-style-type: square; } .home_tutos_2023_bloc .series a { display: block; width: 100%; padding: 10px 0 6px 0; font-size: 18px; color: #EF9D51; border-bottom: 1px dotted #626568; } .home_tutos_2023_bloc .series a:hover { color: #404040; background: #F1F1F1; } @media (max-width: 480px) { .home_tutos_2023 { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; gap: 0; } .home_tutos_2023_bloc { flex-basis: calc(100% - 15px); display: grid; grid-template-columns: 80px calc(100% - 80px); grid-template-rows: 40px 1.4fr; gap: 0px 0px; grid-template-areas: "logo name" "logo series"; margin-bottom: 40px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .home_tutos_2023_bloc .logo { grid-area: logo; width: 80px; } .home_tutos_2023_bloc .logo img { width: 60px; } .home_tutos_2023_bloc .name { text-transform: uppercase; } .home_tutos_2023_bloc .name h2 { font-size: 13px; } .home_tutos_2023_bloc .series { grid-area: series; padding: 15px 10px 20px 40px; } .home_tutos_2023_bloc .series a { display: block; width: 100%; padding: 10px 0 6px 0; font-size: 16px; color: #EF9D51; border-bottom: 1px dotted #626568; } .home_tutos_2023_bloc .series a:hover { color: #404040; background: #F1F1F1; } } .tutos_home_submenu_btn { position: absolute; bottom: 0; width: 100%; height: 58px; background: #F1F1F1; padding: 22px; font-size: 16px; text-align: center; } .tutos_home_submenu_mask { position: absolute; z-index: 2; top: 278px; width: 100%; height: 280px; background: #FFF; border-top: 1px solid #B5B5B5; } .tutos_home_submenu { position: absolute; z-index: -1; top: 281px; left: 0; width: 100%; height: 198px; padding-top: 30px; background: #FFF; } .tutos_home_submenu a { display: block; position: relative; width: 100%; height: 24px; font-size: 16px; text-align: left; padding-left: 40px; cursor: pointer; } .tutos_home_submenu a b { display: block; position: absolute; font-family: 'patuaone'; top: -1px; left: 30px; } .tutos_home_submenu a:hover { color: #61D0C4 !important; } /*--------- TUTORIELS PAR MODELE (TUTOS_PAR_MODELE) ---------*/ .tutos_par_modele_grey_bkg { display: block; position: relative; height: 160px; background: #F1F1F1; margin: 0; } @media (max-width: 544px) { .tutos_par_modele_grey_bkg { height: 120px; } } .tutos_par_modele_grey_bkg:hover { opacity: 0.6; } .tutos_par_modele_grey_bkg img { position: absolute; bottom: 0; } .tutos_par_modele_green_ban { position: relative; display: flex; float: left; z-index: 10; top: 15px; left: -15px; padding: 6px 20px; background: #61D0C4; color: #FFF; } .tutos_par_modele_grey_trgl { position: absolute; z-index: 2; top: 30px; left: -30px; width: 0; height: 0; border-color: transparent #626568 transparent transparent; border-style: solid; border-width: 15px; } /*--------- TUTORIELS PAR REPARATION (PAGE 38) ---------*/ .nivrep_background { float: left; width: 100%; background: #F1F1F1; padding: 0 0 15px 0; } .nivrep_picto { height: 90px; text-align: center; padding-top: 10px; } .nivrep_grade { height: 90px; text-align: center; border-left: 1px solid #B5B5B5; padding-top: 22px; } .nivrep_tutos { height: 90px; border-left: 1px solid #B5B5B5; } #btn_montrer_suite { display: none; } @media (max-width: 544px) { .nivrep_tutos { height: 90px; border-left: none; padding: 10px 0 0 10px; } #btn_montrer_suite { display: inline; background: none; margin-left: 10px; border: 1px solid #B5B5B5; border-radius: 3px; } #btn_montrer_suite:focus { outline: none; } .suite_texte_cachee { display: none; } } .tutos_par_rep_top_grade { float: left; width: 25%; text-align: center; border-right: 1px solid #B5B5B5; } .tutos_par_rep_top_grade b { font-size: 18px; } .tutos_par_rep_top_smileys { float: left; width: 75%; padding-left: 10px; } .tutos_par_rep_top_smileys_line { position: relative; min-height: 22px; margin: 5px 0 0 0; } .tutos_par_rep_top_smileys img { width: 22px; margin-right: 2px; vertical-align: middle; } .tutos_par_rep_top_smileys span { font-size: 13px; font-weight: 600; vertical-align: middle; } .tutos_par_rep_top_text { border-left: 1px solid #B5B5B5; padding-left: 10px; font-size: 13px; } .tutos_par_rep_grey_bkg { position: relative; width: 100%; height: 180px; background: #F1F1F1; } .tutos_par_rep_title { position: relative; float: left; margin: 10px 0 0 -15px; width: 95%; height: 60px; } .tutos_par_rep_title p { display: block; position: relative; z-index: 2; margin: 0; width: 100%; background: #61D0C4; font-size: 16px; color: #FFF; padding: 8px 14px 10px 14px; text-align: left; font-weight: 600; } .tutos_par_rep_grey_trgl { position: relative; top: -15px; left: -15px; width: 0; height: 0; border-color: transparent #626568 transparent transparent; border-style: solid; border-width: 15px; } .tutos_par_rep_difftime { position: relative; float: left; width: 25%; height: 110px; } .tutos_par_rep_time { position: absolute; display: block; left: 0; bottom: 40px; width: 100%; height: 30px; padding-left: 38px; background: #FFF; font-size: 16px; color: #626568; line-height: 28px; font-weight: 600; } .tutos_par_rep_time img { position: absolute; top: 4px; left: 7px; width: 22px; } .tutos_par_rep_diff { position: absolute; display: block; left: 0; bottom: 5px; width: 100%; height: 30px; padding-left: 38px; background: #FFF; font-size: 16px; color: #626568; line-height: 28px; font-weight: 600; } .tutos_par_rep_diff img { position: absolute; top: 2px; left: 3px; width: 30px; } .tutos_par_rep_picto { position: relative; float: left; width: 34%; height: 110px; margin: 0 8% 0 8%; } .tutos_par_rep_picto img { position: absolute; bottom: 0; right: 0; } .tutos_par_rep_buttons { position: relative; float: right; width: 25%; height: 110px; } .tutos_par_rep_btn { position: absolute; display: block; left: 0; width: 100%; height: 30px; background: #FFF; padding-left: 34px; font-family: 'Roboto'; font-size: 16px; color: #61D0C4; line-height: 28px; } .tutos_par_rep_btn:hover { color: #626568; } .nolink { color: #B5B5B5 !important; } .nolink img { filter: grayscale(100); } .btn_photos { bottom: 5px; } .btn_video { bottom: 40px; } .btn_3d { bottom: 75px; } .btn_3d img, .btn_video img, .btn_photos img { position: absolute; top: 4px; left: 7px; width: 20px; height: 20px; } @media (max-width: 992px) { .tutos_par_rep_grey_bkg p { font-size: 12px; } .tutos_par_rep_grey_bkg a, .tutos_par_rep_grey_bkg div { font-size: 10px; } } @media (max-width: 544px) { .tutos_par_rep_difftime, .tutos_par_rep_buttons { width: 30%; } .tutos_par_rep_picto { margin: 0 3% 0 3%; } .tutos_par_rep_grey_bkg p { font-size: 11px; } .tutos_par_rep_grey_bkg a, .tutos_par_rep_grey_bkg div { font-size: 10px; } .tutos_par_rep_top_text { border: none; } } /*--------- OUTILS ---------*/ .outils_link { display: block; width: 100%; height: 120px; background: #F1F1F1; } .outils_link:hover { background: rgba(241,241,241,0.6); cursor: pointer; } .outils_title { position: relative; display: block; float: left; width: 100%; height: 30px; margin: 10px 0 0 -12px; padding-left: 46px; color: #FFF; font-size: 16px; line-height: 30px; background: #61D0C4; z-index: 2; } .outils_grey_trgl { position: relative; top: 29px; left: -24px; width: 0; height: 0; border-color: transparent #626568 transparent transparent; border-style: solid; border-width: 12px; } .outils_title img { position: absolute; width: 26px; height: 26px; top: 2px; left: 12px; } .outils_list { display: block; float: left; width: 100%; height: 80px; margin: 0; padding: 12px; } .outils_list li { color: #626568; } .outils_bullet { display: block; float: left; margin-right: 4px; font-family: 'PatuaOne'; font-size: 18px; } @media (max-width: 544px) { .outils_link { height: 56px; } .outils_title { font-size: 12px; } .outils_list { display: none; } } /*--------- VUES ECLATEES (VUE_ECLATEE) ---------*/ .vue_eclatee_title { width: 100%; height: 54px; background: #F1F1F1; line-height: 52px; color: #626568; font-size: 22px; margin: 20px 0; } #vue_eclatee_frame { position: relative; float: left; width: 910px; min-height: 800px; background: #FFF; margin: 0 0 200px 20px; } #vue_eclatee_img { width: 930px; } .vue_eclatee_parts { position: absolute; } .vue_eclatee_parts_area { float: left; } .vue_eclatee_links_frame { display: none; position: relative; float: left; width: 202px; margin: 4px; border: 1px solid #B5B5B5; } .vue_eclatee_links_title { display: block; position: relative; float: left; width: 200px; margin: 0; background: #61D0C4; font-family: 'Roboto'; color: #FFF; text-align: left; font-size: 16px; padding: 6px 30px 6px 10px; } .vue_eclatee_links_title img { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; } .vue_eclatee_links { display: block; position: relative; margin: 0; background: #FFF; color: #626568; font-size: 15px; font-family: 'Roboto'; padding: 8px; } .vue_eclatee_link1 { float: left; width: 200px; height: 65px; font-size: 15px; text-align: center; padding-top: 10px; border-top: 1px solid #B5B5B5; } .vue_eclatee_link2 { float: left; width: 200px; height: 35px; padding-left: 35px; border-top: 1px solid #B5B5B5; } .vue_eclatee_link3 { float: left; width: 200px; height: 35px; padding-left: 35px; border-top: 1px solid #B5B5B5; } .vue_eclatee_link4 { float: left; width: 200px; height: 35px; padding-left: 35px; border-top: 1px solid #B5B5B5; } .vue_eclatee_link1 img { width: 27px; height: 27px; } .vue_eclatee_link2 img, .vue_eclatee_link3 img, .vue_eclatee_link4 img { position: absolute; top: 4px; left: 4px; width: 27px; height: 27px; } #vue_eclatee_frame a:hover { color: #61D0C4; } .vue_eclatee_close_btn { cursor: pointer; } @media (max-width: 991px) { .vue_eclatee_title { font-size: 13px; } #vue_eclatee_frame { position: relative; float: left; width: 100%; height: auto; background: #FFF; margin: 0; } #vue_eclatee_img { width: 100%; } .vue_eclatee_parts_area { display: none; } } /*--------- CHOIX ECRAN IPHONE (CHOIX_ECRAN) ---------*/ #page_choix_couleurs, #page_choix_criteres, #page_choix_ecrans { display: none; } #page_choix_ecrans { margin-top: 30px; } .cms_title { font-size: 22px; background: #F1F1F1; padding: 0 20px; margin-bottom: 30px; } .cms_title img { vertical-align: -18px; } #goto_modeles, #goto_couleurs { float: right; font-size: 36px; margin: 6px -7px 0 0; } #goto_modeles:hover, #goto_couleurs:hover { cursor: pointer; color: #61D0C4; } .choix_ecran_modele, .choix_ecran_couleur { padding: 2px; } .choix_ecran_modele p, .choix_ecran_couleur p { display: block; border: 1px solid #F1F1F1; text-align: center; padding: 10px; margin: 0; } .choix_ecran_modele p:hover, .choix_ecran_couleur p:hover { cursor: pointer; color: #61D0C4; border: 1px solid #61D0C4; } .produits_par_couleur { display: none; } .choix_ecran_critere { width: 20px; height: 20px; vertical-align: -6px; margin: 0 16px 10px 0; } .choix_ecran_critere_label { display: inline; } .choix_ecran_produit { float: left; width: 20%; } #page_choix_ecrans #noresults { display: none; font-size: 16px; margin-bottom: 26px; color: #EF9D51; } #page_choix_ecrans #noresults i { font-size: 33px; vertical-align: -11px; margin-right: 10px; } @media (max-width: 991px) { .cms_title { font-size: 1em; } .choix_ecran_produit { float: left; width: 50%; } } @media (min-width: 768px) { .choix_ecran_produit .product-miniature { opacity: 0.2; } } .choix_ecran_produit .product-miniature:hover { opacity: 1 !important; transition: .5s ease-in; } .choix_ecran_produit .thumbnail-container { position: relative; width: 100%; height: 300px; border: 1px solid #F1F1F1; box-shadow: none; } .choix_ecran_produit .thumbnail-container .thumbnail-image img { width: 100%; } .choix_ecran_produit .product-description { position: relative; width: 100%; background: #FFF; } .choix_ecran_produit .price_related_products_pro { height: 30px; font-size: 18px; text-align: center; color: #61D0C4; } .choix_ecran_produit .product-description form { text-align: center; } .choix_ecran_produit .product-description .add-to-cart { background: url(https://dev-1.brico-phone.com/themes/bricophone/assets/img/icon-panier/panier-categorie.svg) no-repeat right; background-size: 22px; background-color: #ffffff; padding: 5px 28px 5px 5px; margin: auto; border: 1px solid #bcbcbc; border-radius: 10px; display: inline-block; content: "voir le contenu"; background-position-x: 110px; } /*--------------- RELATED PRODUCTS PRO ---------------------*/ .related_products_pro_container .product-description .add-to-cart { background: url(https://dev-1.brico-phone.com/themes/bricophone/assets/img/icon-panier/panier-categorie.svg) no-repeat right; background-size: 22px; background-color: #ffffff; padding: 5px 28px 5px 5px; margin: auto; border: 1px solid #bcbcbc; border-radius: 10px; display: inline-block; content: "voir le contenu"; background-position-x: 110px; } /*--------- ESPACE PROS ---------*/ .espace_pros_title { width: 100; height: 50px; background: #F1F1F1; margin: 0 0 30px 0; font-size: 18px; color: #404040; } .espace_pros_text { font-size: 14px; padding: 0 12px; margin: 0 0 30px 0; } #pros_map { width: 80%; height: 500px; margin: 0 10% 30px 10%; } .espace_pros_departement { position: relative; display: block; float: left; width: 100%; background: #F1F1F1; margin-bottom: 30px; } .espace_pros_dpt_title { position: relative; display: block; z-index: 2; float: left; height: 40px; background: #61D0C4; color: #FFF; font-size: 16px; line-height: 40px; margin: 10px 0 0 -15px; padding: 0 15px; } .espace_pros_grey_trgl { position: relative; top: 35px; left: -30px; width: 0; height: 0; border-color: transparent #626568 transparent transparent; border-style: solid; border-width: 15px; } .espace_pros_partenaire { display: block; height: 80px; margin: 15px 0; background: #FFF; /* border: 1px solid #BB2222; */ } .espace_pros_prt_img { height: 80px; background: #FFF; text-align: center; padding-top: 10px; } .espace_pros_prt_img img { height: 60px; max-width: 120px; } .espace_pros_prt_place { display: flex; flex-direction: column; justify-content: center; height: 80px; background: #FFF; font-size: 16px; text-align: left; padding-left: 20px; } .espace_pros_prt_name { display: flex; flex-direction: column; justify-content: center; height: 80px; background: #FFF; font-size: 16px; text-align: left; padding-left: 24px; } .espace_pros_prt_phone { display: flex; flex-direction: column; justify-content: center; height: 80px; background: #FFF; font-size: 16px; text-align: left; padding-left: 22px; } .espace_pros_prt_place img, .espace_pros_prt_name img, .espace_pros_prt_phone img { position: absolute; left: 0; width: 20px; height: 20px; } @media (max-width: 767px) { .espace_pros_partenaire { height: 180px; } .espace_pros_partenaire:first-child { margin-top: 35px;; } .espace_pros_prt_img { height: 60px; padding-top: 0; } .espace_pros_prt_place, .espace_pros_prt_name, .espace_pros_prt_phone { height: 40px; font-size: 12px; } } /*--------- IDENTIFICATION MODELES (IDENTIFICATION_MODELE) ---------*/ .identification_modele_logos { margin-bottom: 30px; } .identification_modele_logos img { width: 92px; } .identification_modele_title { height: 54px; background: #F1F1F1 !important; line-height: 52px; color: #626568; font-size: 22px; margin: 20px 0; } .identification_modele_title img { vertical-align: -18px; } .identification_modele_tab { display: none; width: 100%; table-layout: fixed; margin-bottom: 30px; } .identification_modele_tab td { width: 50%; /* min-height: 30px; */ padding: 6px; text-align: left; } @media (max-width:767px) { .identification_modele_tab td div { width: 130px; height: auto; overflow: hidden; text-align: left; } } .identification_modele_serie { height: 60px !important; background: #FFF !important; padding: 0 0 10px 24px !important; font-size: 23px; vertical-align: bottom; border-bottom: 2px solid #CCC; } .identification_modele_tab td a { color: #61D0C4; text-decoration: underline; } .identification_modele_tab tr:nth-child(odd) td { background: #F1F1F1; } .identification_modele_tab tr:nth-child(even) td { background: #FFF; } .promo-code-button { color: #61D0C4; font-weight: bold; } @media (max-width:767px) { .transition_floating .mm_menus_ul { padding-bottom: 100px; } } .netreviews_stars_light #slide { right: 0; } @media (min-width:767px) { #bp_main_menu_button { height: 42px; margin-top: 1px; } } #ui-id-1 { opacity: 0; } .df-classic .df-main, .df-aside { font-family: Roboto; } .df-card__main { padding: 6px 16px !important; } [data-layout=list] .df-card__image { width: 80px !important; height: 80px !important; } [data-layout=list] .df-card__title { color: #61D0C4; font-size: 16px; } .df-card__content>* { margin-bottom: 0 !important; } .df-card__price { font-weight: 600; font-size: 20px; color: #626568; } /* INTERFACE APERCU PANIER DANS BANDEAU */ /* .cart-hover-content { padding: 10px 0 0 0; } .cart-hover-content .cart-products { padding: 10px 10px 10px 15px; } .cart-hover-content .cart-total { padding: 0 10px; } .cart-wishlist-action .row { margin: 0; } .cart-wishlist-action .row div { padding: 0; } .cart-wishlist-viewcart { border: 2px solid #FFF; border-right: none; } .cart-wishlist-checkout { border: 2px solid #FFF; } .cart-wishlist-viewcart:hover, .cart-wishlist-checkout:hover { background: #626568; } */ /* PAGE DE CONNEXION */ #ma-account #login-form { padding: 16px 0; border-top: 1px solid #F1F1F1; border-bottom: 1px solid #F1F1F1; } .renew-password, .help-block { color: #EF9D51; padding: 0 20px; margin: 0; } #btn_eye_passwd { display: block; position: absolute; z-index: 10; right: 24px; top: 6px; width: 0; height: 0; border: none; background: none !important; color: #626568; } #btn_eye_passwd:focus { outline: none; } #authentication [data-action=show-password] { background: none; } /* TEXTE COMPARER LISTE PRODUITS */ .add_to_compare, .add_to_compare * { float: left !important; transform: rotate(135deg) !important; font-size: 24px !important; color: #B5B5B5; } #products .compare { float: left !important; margin: 0 !important; } #products .compare .custom_compare_btn_on, #products .compare .custom_compare_btn_off { float: left; font-size: 16px; margin: 4px 0 0 4px; } #products .compare .custom_compare_btn_off { color: #878787; } #products .compare .custom_compare_btn_off:hover { color: #B5B5B5; cursor: not-allowed; opacity: 0.6; } #products .compare .custom_compare_btn_on { display: none; color: #61D0C4; cursor: pointer; } /* MENU VERT */ .white_triangle:after { position: absolute; content: ''; left: 40%; width: 0; height: 0; bottom: -3px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 8px solid #ffffff; -moz-transform: scale(0.999); -webkit-backface-visibility: hidden; } .white_triangle .nav-link { color : #626568 !important; } .sub_menu { display: none; } .sub_menu_icones { background-size: 40px; background-repeat: no-repeat; background-position: center; padding: 20px; display: inline-block; } /* TUNNEL PARTIE MOYENS DE PAIEMENT */ .payment_bloc { padding: 4px 10px 4px 4px; } .payment-option { padding: 0; background: #F1F1F1; } .payment-option .paypal-marks { display: none; } .payment_btn_radio { display: flex !important; height: 60px; text-align: left; align-items: center; } .payment_text { height: 60px; } .payment_text label { display: flex !important; height: 60px; text-align: left; align-items: center; cursor: pointer; } .payment_logos { height: 60px; padding: 0; } .payment_logos label { text-align: center !important; display: table-cell; height: 60px; vertical-align: middle; } .payment_logos img.clicandpay { width: 160px !important; } .payment_logos img.paypal1 { width: 120px !important; } .payment_logos img.paypal2 { width: 90px !important; vertical-align: -18px; } .payment_ai_bloc { padding: 4px 10px 4px 4px; } .payment-options .additional-information { margin: 0 !important; padding: 10px; background: #F1F1F1; } /* PANIER SUR PAGE PRODUIT / TUNNEL 2019 */ .listing_products .product_thumbnail { padding: 0 15px 0 0; height: 80px; /* border: 1px solid #BB2222; */ } .listing_products .product_name_description { padding: 0; /* border: 1px solid #BB2222; */ } .listing_products .product_name { text-align: left; padding: 0; } .listing_products .product_name a { font-size: 1.4em; font-weight: 600; } .listing_products .product_description { text-align: left; padding: 0; } .listing_products .product_description p { font-size: 1em; } .listing_products .product_quantity_reviews { /* height: 60px; */ padding: 0 10px 0 10px; text-align: left; font-size: 0.8em; /* border: 1px solid #BB2222; */ } .listing_products .product_quantity_reviews img { vertical-align: -7px; } .listing_products .av_category_stars { margin-top: 10px; } .listing_products .av_category_stars .ratingText { margin-top: -10px; } .listing_products .product_price { padding: 10px 0 0 0; /* height: 60px; */ font-size: 1.8em; font-weight: 600; color: #61D0C4; /* border: 1px solid #BB2222; */ } .listing_products .product_tax_label { width: 100%; font-size: 0.5em; margin-bottom: 4px; color: #CCC; text-align: right; } .listing_products .product_cart { /* height: 60px; */ padding: 10px 0 0 15px; /* border: 1px solid #BB2222; */ } .listing_products .product_cart button { padding: 0; width: 100%; height: 40px; background-position: center !important; } .les-plus-produit { margin-top: 14px; } .cart2019 { margin: 0 15px; border: 1px solid #BCBCBC; } .cart2019 .product-prices { margin: 0px 0px 4px 0px; padding: 12px 6px 0 10px; background: none; } .cart2019 .product-price { margin : 0; } .cart2019 .current-price { margin: 0; font-size: 26px; font-weight: 600; color: #61D0C4; } .cart2019 .price_ttc_ht { font-size: 13px; } .cart2019 .current-price-discount { font-size: 14px; color: #626568; text-decoration: line-through; } .cart2019 .deuxxsf { font-size: 13px; font-weight: 400; color: #626568; } .cart2019 .stock { padding: 10px; overflow: auto; border: none; padding: 2px 10px 6px 10px; } .cart2019 .product-in-stock, .cart2019 #product-availability { font-size: 14px; padding: 0; margin: 0; } .cart2019 .product-availability-date label { font-size: 14px; color: #EF9D51 } .cart2019 .product-availability-date span, .cart2019 .product-in-stock label { font-size: 14px; } .cart2019 .product-quantities { padding: 0; text-align: right; } .cart2019 .quantity-add-to-cart { padding: 0; margin-right: -2px; } .cart2019 .product-add-to-cart { width: 100%; } .cart2019 .qty { margin-right: -1px; } /* @media (max-width: 767px) { .cart2019 .qty { margin-right: -8px; } } */ .cart2019 .product-quantity #quantity_wanted { width: calc(100% - 30px); text-align: center; height: 38px; background: #F1F1F1; border: none; font-size: 22px; color: #626568; margin-top: 1px; } .cart2019 .js-cart-line-product-quantity { height: 2.4rem !important; width: 2.5rem !important; } .cart2019 button.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-up { margin-top: 1px; background-color: #FFF; border: 1px solid #F1F1F1; height: 1.25rem; } .cart2019 button.btn.btn-touchspin.js-touchspin.bootstrap-touchspin-down { background-color: #FFF; border: 1px solid #F1F1F1; height: 1.25rem; } .cart2019 .product-quantity .input-group-btn-vertical { width: 30px; display: inline; z-index: 2; } .cart2019 .product-quantity .qty_grey_triangle { position: absolute; top: 1px; left: -38px; font-size: 0px; line-height: 0%; width: 0px; border-top: 38px solid #F1F1F1; border-left: 38px solid #FFF; } .cart2019 .product-quantity .qty { width: 30%; margin-bottom: 0px; float : none; display : block; } .cart2019 .product-quantity .add { width: 80%; margin-bottom: 0px; float : none; display : block; } .cart2019 button.btn.btn-primary.add-to-cart { padding : 9px; background-color: #626568; border-radius: 5px; } .cart2019 .add { width: 100%; } .cart2019 .add-cart-button { float: right; width: 100%; height: 38px; margin: 1px 0 0 1px; background-color: #626568; background-image: url(../img/icon-panier/basket_icon.png); background-size: 30px; background-repeat: no-repeat; background-position: right 20px center; text-align: left; color: #FFF; padding-left: 24px; transition: .3s ease; } @media (max-width: 375px) { .cart2019 .add-cart-button { font-size: 0.8rem; } } .cart2019 .add-cart-button:focus { outline: none; } .cart2019 .add-cart-button:hover { background-color: #61D0C4; } .product-line-grid-right .bootstrap-touchspin { width: 100%; } .product-line-grid-right .qty { padding: 0; } .product-quantity .input-group-btn-vertical .btn i { left: 0.4rem; } @media (max-width: 767px) { .cart2019 .deuxxsf { font-size: 10px; } .cart2019 .product-availability-date span, .cart2019 .product-in-stock label { font-size: 12px; } .tab-content .tab-pane { padding: 1em; border-left: 1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; border-right: 1px solid #B5B5B5; } } .product-line-grid-right .bootstrap-touchspin { width: 100%; } .product-line-grid-right .qty { padding: 0; } .product-quantity .input-group-btn-vertical .btn i { left: 0.4rem; } .amazonpay-button-inner-image { max-height: 36px !important; } @media (max-width: 767px) { .cart2019 .deuxxsf { font-size: 10px; } .cart2019 .product-availability-date span, .cart2019 .product-in-stock label { font-size: 12px; } .tab-content .tab-pane { padding: 1em; border-left: 1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; border-right: 1px solid #B5B5B5; } .nav-tabs li.nav-item:last-child{ border-bottom: none; } } /* PAGE PANIER 2020 */ .cart-grid-row .cart-block { padding: 0 0 1rem 0; } .cart-grid-row .cart-block h1 { margin-top: -10px; } .cart-grid-body .cart-overview { padding: 1rem 0; } .cart_2020_tab { display: table; padding: 0; } .cart_2020_row { display: table-row; } .cart_2020_thead { display: table-cell; height: 50px; vertical-align: middle; padding: 10px 0; border-bottom: 1px solid #61D0C4; } .cart_2020_thead .material-icons { font-size: 24px; color: #626568; margin-top: -8px; } .cart_2020_cell { display: table-cell; height: 128px; vertical-align: middle; padding: 20px 0; border-bottom: 1px solid #B5B5B5; } .cpl_designation { padding: 30px 50px 20px 16px; } .cpl_price { padding: 30px 0 20px 0; font-size: 20px; } .cpl_price_crossed { background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%); font-size: 14px; color: #626568; } .cpl_qty .input-group .form-control { width: 46px; height: 46px; background: none; color: #626568; text-align: center; padding: 0; } .cpl_qty .input-group-btn-vertical .btn { width: 24px; height: 24px; } .cpl_qty .input-group-btn-vertical .btn i { top: 4px; } .cpl_total { color: #61D0C4; font-weight: 600; padding: 30px 0 20px 10px; font-size: 24px; background: #F1F1F1; } .cpl_delete { text-align: right; padding-right: 14px; } .cpl_delete a { float: right; } .cart-grid-reassurance { display: flex; flex-direction: row; justify-content: space-evenly; align-items: flex-end; } .cart-grid-reassurance .reassurance_block { flex-basis: 25%; min-width: 125px; min-height: 125px; text-align: center; margin: 0 4px; background: #F1F1F1; border-radius: 50%; overflow: hidden; } #img_capital { width: 88%; border: 4px solid #F1F1F1; } #img_paiement { width: 64px; margin: 4px; } #img_retours { width: 64px; margin: 4px; } #img_satisfaction { width: 64px; margin: 4px; } .cart-grid-reassurance .content { min-height: 300px; background: #F1F1F1; } /* .cart-grid-reassurance .content { min-height: 280px; padding: 10px; background: #F1F1F1; } .cart-grid-reassurance .content span { display: block; height: 80px; background: #FFF; margin-bottom: 10px; } .cart-grid-reassurance .content span:last-child { display: block; height: 80px; background: #FFF; margin: 0; } .cart-grid-reassurance span img { float: left; width: auto; height: 100%; border-right: 10px solid #F1F1F1; } .cart-grid-reassurance span p { float: left; padding: 20px 0 0 20px; margin: 0; font-size: 22px; color: #626568; font-weight: 600; } .cart-grid-reassurance span i { float: left; width: 60%; padding: 4px 0 0 20px; font-size: 14px; color: #626568; } */ @media (max-width: 769px) { .cart-grid { display: flex; flex-direction: column; } .cart-grid-reassurance { order: 2; margin-top: 20px; } .cart-grid-right { order: 1; } } @media (max-width: 480px) { .cart_2020_tab { margin-bottom: 20px; border-bottom: 1px solid #F1F1F1; } .cart_2020_cell:nth-child(-n+3) { display: table-cell; height: 94px; padding: 10px 0; border: none; } .cart_2020_cell:nth-child(n+4) { display: table-cell; height: 64px; padding: 10px 0; border: none; line-height: 46px; } .cpl_designation { padding: 10px 20px !important; } .cpl_designation .label { font-size: 0.7rem; } .cpl_price, .cpl_total { text-align: right; font-size: 1rem; padding-right: 6px !important; } .cart-grid-reassurance .content { background: none; } .cart-grid-reassurance .reassurance_block { width: calc(100% - 30px); } .cart-grid-reassurance span p { font-size: 13px; } .cart-grid-reassurance span i { font-size: 11px; } .promo-code-button { line-height: 1.5; } .cart-voucher .promo-input { width: 50%; } } @media (max-width: 320px) { .cart-grid-reassurance span i { display: none; } } .header-message { margin: 6px 6px 0 0; background: #EF9D51; padding: 8px; color: #FFF; text-align: center; } @media (min-width: 769px) { .header-message { width: calc(83.3333% - 6px); } } .header-covid { margin: 6px auto; background: #D2D2D2; text-align: center; padding: 8px 4px; color: #FFF; font-weight: bold; } #message-covid19 { z-index: 2; line-height: 17px; background: #DCDCDC; margin-bottom: -74px; padding: 4px; } @media (max-width: 680px) { #message-covid19 { height: 62px; line-height: 19px; background: #DCDCDC; margin: 0; } } .logo_faq { width: 252px; margin: 8px 0; } .content_faq { margin-top: 60px; } #header .header-top .blockcart .header_cart_faq { padding: 10px; } .article-share .share { top: 0; } .banniere_assurance { margin-bottom: 10px; padding: 0; } .banniere_assurance img { width: 100%; height: auto; } #professionnels { position: absolute; right: -32px; top: 21px; font-size: 26px; color: #EF9D51; font-weight: 700; } .avantages_bp_mobile { width: 100%; height: 22px; background: #626568; color: #FFF; text-align: center; line-height: 23px; } #tab_comp_ip10pro td { border-right: 3px solid #FFF; border-bottom: 3px solid #FFF; border-left: none; border-top: none; } @media (max-width: 680px) { #tab_comp_ip10pro td { font-size: 10px; } } .tab_ip11pro { } .tab_ip11pro_cat { position: relative; width: 56px; height: 150px; background: #353535; border-top: 6px solid #FFF; border-bottom: 6px solid #FFF; } .tab_ip11pro_cat p { display: inline-block; position: absolute; bottom: 74px; left: -54px; width: 180px; height: 32px; transform: rotate(270deg); color: #FFF; font-size: 16px; font-weight: bold; } .select { background: #EF9D51; } .tab_ip11pro_description { height: 110px; background: #F1F1F1; font-size: 14px; color: #333; padding: 10px; text-align: justify; border: 2px solid #FFF; } .tab_ip11pro_techno { height: 40px; background: #F1F1F1; border: 2px solid #FFF; font-size: 14px; color: #333; vertical-align: top; padding: 10px 10px 0 10px; } .tab_ip11pro_techno p { font-size: 20px; color: #61D0C4; font-weight: bold; text-align: center; } .tab_ip11pro_avantages, .tab_ip11pro_inconvenients { height: 40px; background: #F1F1F1; border: 2px solid #FFF; font-size: 14px; color: #333; vertical-align: top; padding: 10px 10px 0 10px; } @media (max-width: 375px) { .tab_ip11pro_cat { width: 30px; } .tab_ip11pro_cat p { left: -66px; } .tab_ip11pro_description { font-size: 11px; padding: 4px; } .tab_ip11pro_techno, .tab_ip11pro_avantages, .tab_ip11pro_inconvenients { width: 33.33%; font-size: 9px; padding: 4px; } .tab_ip11pro_techno p { font-size: 10px; font-weight: normal; } .tab_ip11pro_avantages ul li, .tab_ip11pro_inconvenients ul li { list-style-type: none !important; margin-left: 0 !important; } } .df-card__price--new { color: #EF9D51 !important; } div [data-container-express-checkout] { justify-content: start; } .paypal-buttons { z-index: 1 !important; } /* LARGEUR FORMULAIRE DEMANDE REAPPRO EMAIL MODULE ps_emailalerts */ .custom_emailalerts_form { margin: 1rem 0 2rem; } /* REFONT HEADER 2022 */ /* body { padding-top: 120px; } .header_container { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; background: linear-gradient(0deg, #FFF 80px, #F1F1F1 40px); background-position-y: 0; transition: .8s ease; border-bottom: 1px solid #F1F1F1; } .header_container::after { position: absolute; display: block; content: ""; top: 40px; left: 0; width: 100%; height: 80px; background-image: url(https://dev-1.brico-phone.com/themes/bricophone/assets/img/FondEngrenage.svg); background-repeat: no-repeat; background-size: 100%; background-position-x: 16px; } .header { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr 1fr; grid-template-rows: 40px 80px; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "tutos diag blog faq gap tchat tchat phone phone" "menu search search search logo wishlist contact account cart"; width: 1110px; height: 120px; margin: 0 auto; } .header_container_fixed { position: fixed; top: -60px; } .header a, .header a:hover, .header a:focus, .header a:active { text-decoration: none; color: #626568 !important; } .tutos { grid-area: tutos; border-left: 1px solid #FFF; } .diag { grid-area: diag; border-left: 1px solid #FFF; } .blog { grid-area: blog; border-left: 1px solid #FFF; } .faq { grid-area: faq; border-left: 1px solid #FFF; border-right: 1px solid #FFF; } .gap { grid-area: gap; } .tchat { grid-area: tchat; border-left: 1px solid #FFF; cursor: pointer; } .phone { grid-area: phone; border-left: 1px solid #FFF; border-right: 1px solid #FFF; } .tchat i, .phone i { display: block; float: left; width: 30px; height: 40px; font-size: 24px; color: #EF9D51 !important; line-height: 40px; padding-left: 8px; } .tchat .title, .phone .title { display: block; float: right; width: calc(100% - 30px); height: 25px; font-size: 13px; line-height: 28px; text-align: center; } .tchat .subtitle, .phone .subtitle { display: block; float: right; width: calc(100% - 30px); height: 15px; font-size: 10px; font-weight: 400; line-height: 5px; text-align: center; } .header_1_btn { display: block; width: 100%; height: 100%; font-size: 14px; text-align: center; text-decoration: none; color: #404040; line-height: 42px; } .header_1_btn:hover { background: #FFF; } .header_1_btn i { color: #61D0C4; } .menu { grid-area: menu; z-index: 1; background: #FFF; border-left: 1px solid #F1F1F1; text-align: center; color: #626568; } .menu .picto { display: flex; align-items: flex-end; justify-content: space-around; height: 50px; font-size: 30px; color: #4C958B; transition: .8s ease; } .menu .title { font-size: 12px; } .menu .ets_mm_megamenu { margin: 0; height: 100%; } .menu .layout_layout1 .ets_mm_megamenu_content { height: 100%; background: none; border: none; } .menu .layout_layout1 .ets_mm_megamenu_content .container { height: 100%; padding: 0; } .menu .layout_layout1 .ets_mm_megamenu_content_content { height: 100%; padding: 0; } .menu .layout_layout1 .ets_mm_megamenu_content_content .mm_menus_li { height: calc(100% - 1px); } .menu .layout_layout1 .ets_mm_megamenu_content_content .mm_menus_li a { height: 100%; } .menu .layout_layout1 .ets_mm_megamenu_content_content .mm_menus_li .mm_columns_ul { top: calc(100% + 1px); left: -1px; } .search { position: relative; grid-area: search; z-index: 1; background: #FFF; border-left: 1px solid #F1F1F1; border-right: 1px solid #F1F1F1; } .search #search_widget { position: relative; width: 80%; height: 34px; margin: 23px 10%; transition: .8s ease; } .search input[type=text] { width: 100%; height: 100%; border-style: solid; border-width: 0 0 1px 0; border-color: #4C958B; font-size: 18px; } .search #search_widget::after { display: block; position: absolute; bottom: 12px; right: 4px; font-family: 'Font Awesome 5 Free'; content: '\f002'; color: #626568; font-weight: 300; font-size: 18px; } .search input[type=text]::placeholder { font-size: 16px; color: #CCC; } .search input[type=text]:focus { outline: none; } .search .picto { display: flex; align-items: center; justify-content: space-around; height: 50px; font-size: 20px; color: #4C958B; transition: .8s ease; } .logo { grid-area: logo; overflow: hidden; z-index: 1; background: #FFF; } .logo_image img { width: 188px; margin: 16px auto 0 auto; } .logo_image .slogan { display:block; text-align: center; font-size: 17px; color: #61D0C4; margin-top: -2px; } .wishlist { grid-area: wishlist; z-index: 1; background: #FFF; border-left: 1px solid #F1F1F1; text-align: center; color: #626568; } .wishlist .picto { display: flex; align-items: flex-end; justify-content: space-around; height: 50px; font-size: 25px; color: #4C958B; padding-bottom: 5px; transition: .8s ease; } .wishlist .title { font-size: 12px; } .contact { grid-area: contact; z-index: 1; background: #FFF; border-left: 1px solid #F1F1F1; text-align: center; color: #626568; } .contact .picto { display: flex; align-items: flex-end; justify-content: space-around; height: 50px; font-size: 25px; color: #4C958B; padding-bottom: 5px; transition: .8s ease; } .contact .title { font-size: 12px; } .account { position: relative; grid-area: account; z-index: 1; background: #FFF; border-left: 1px solid #F1F1F1; text-align: center; color: #626568; } .account .picto { display: flex; align-items: flex-end; justify-content: space-around; height: 50px; font-size: 25px; color: #4C958B; padding-bottom: 5px; transition: .8s ease; } .account .title { font-size: 12px; } .cart { position: relative; grid-area: cart; z-index: 1; background: #FFF; border-left: 1px solid #F1F1F1; border-right: 1px solid #F1F1F1; text-align: center; color: #626568; } .cart .picto { display: flex; align-items: flex-end; justify-content: space-around; height: 50px; font-size: 25px; color: #4C958B; padding-bottom: 5px; transition: .8s ease; } .cart .title { font-size: 12px; } .cart #nb_products_in_cart { display: flex; position: absolute; top: 12px; right: 17px; width: 22px; height: 22px; border-radius: 50%; background: #EF9D51; font-size: 16px; color: #FFF; align-content: center; justify-content: center; flex-direction: column; } .cart .cart-hover-content { display: none; position: absolute; top: 80px; width: calc(((1110px / 12) * 4) + 2px); right: -2px; white-space: initial; color: #626568; border: 1px solid #F1F1F1; padding-bottom: 4px; } .cart.fixed #nb_products_in_cart { top: 24px; transition: .8s ease; } .cart .cart-hover-content::before { content: ""; display: block; position: absolute; z-index: 1998; top: 0; left: -100vw; width: 200vw; height: 100vh; background: rgba(255,255,255,0.6); backdrop-filter: blur(3px); } #cart-preview_mask { position: fixed; display: none; top: 0; left: 0; z-index: 1998; width: 100vw; height: 100vh; background: transparent; cursor: default; } #cart-preview_over_mask { position: relative; float: left; z-index: 1999; width: 100%; padding: 4px; background: #EBEBEB; } .nb_cart_products { display: block; float: left; width: 100%; height: 30px; background: #FFF; padding: 8px; text-align: left; margin-bottom: 5px; font-size: 14px; color: #EF9D51; } #close_cart_btn { display: block; float: left; width: 30px; height: 30px; margin-left: 5px; padding-top: 6px; background: #FFF; cursor: pointer; } #close_cart_btn .close_cart_btn_icon { font-size: 20px; color: #EF9D51; transform: rotate(-90deg); } .cart-hover-content .cart-products { background: #FFF; } .logo_container { position: relative; width: 200%; height: 100%; left: -100%; overflow: hidden; } .logo_container .buttons { position: relative; float: left; width: 50%; height: 60px; top: 20px; } .logo_container .logo_image { float: left; width: 50%; height: 100%; text-align: center; } .menu:hover, .wishlist:hover, .contact:hover, .account:hover, .cart:hover, .tutos_2:hover, .diag_2:hover, .blog_2:hover, .faq_2:hover { background: #FBFBFB; cursor: pointer; } .tutos_2, .diag_2, .blog_2, .faq_2 { float: left; width: 25%; height: 100%; background: #FFF; border-right: 1px solid #F1F1F1; text-align: center; color: #626568; } .tutos_2 .picto, .diag_2 .picto, .blog_2 .picto, .faq_2 .picto { display: flex; align-items: flex-end; justify-content: space-around; height: 36px; font-size: 20px; color: #4C958B; padding-bottom: 5px; } .tutos_2 .title, .diag_2 .title, .blog_2 .title, .faq_2 .title { font-size: 12px; } .faq_2 { border: none; } .menu.fixed .picto { height: 58px; font-size: 25px; padding-bottom: 2px; transition: .8s ease; } .search.fixed #search_widget { margin-top: 34px; transition: .8s ease; } .wishlist.fixed .picto, .contact.fixed .picto, .account.fixed .picto, .cart.fixed .picto { height: 56px; font-size: 22px; padding-bottom: 4px; transition: .8s ease; } @media screen and (max-width: 1110px) { .header { width: 100%; } .header { grid-template-columns: 1fr 1fr 1fr 1fr 4fr 1fr 1fr 1fr 1fr; } .tchat .subtitle, .phone .subtitle { font-size: 9px; } } @media screen and (max-width: 1023px) { body { padding-top: 76px; } .header_container_fixed { top: -26px; } .header { grid-template-columns: 1fr 1fr 4fr 4fr 1fr 1fr; grid-template-areas: "tchat tchat tchat phone phone phone" "menu search logo logo account cart"; grid-template-rows: 26px 50px; height: 76px; } .tutos, .diag, .blog, .faq, .wishlist, .contact { display: none; } .header_container::after { height: 0; background: none; } .menu .title, .account .title, .cart .title { display: none; } .tchat, .phone { border-bottom: 1px solid #F1F1F1; } .tchat { border-right: 1px solid #F1F1F1; } .tchat .fa-comments { width: 30px; height: 26px; font-size: 20px; color: #EF9D51 !important; line-height: 26px; margin-right: 16px; padding-left: 10px; } .tchat .title { float: left; width: auto; height: 26px; font-size: 13px; line-height: 24px; margin-right: 3px; } .tchat .subtitle { float: left; width: auto; height: 26px; font-size: 13px; font-weight: 400; line-height: 24px; } .phone .fa-phone { float: right; width: 30px; height: 26px; font-size: 20px; color: #EF9D51 !important; line-height: 26px; margin-right: 10px; padding-left: 10px; } .phone .title { float: right; width: auto; height: 26px; font-size: 13px; line-height: 24px; margin-left: 3px; } .phone .subtitle { float: right; width: auto; height: 26px; font-size: 13px; font-weight: 400; line-height: 24px; } .phone .subtitle::after { content: " / "; } .menu .picto { align-items: center; font-size: 24px; padding-top: 2px; } .search { z-index: 2; border-right: none; } .search #search_widget { position: absolute; top: 0; left: 0; width: 130px; height: 50px; margin: 0; } .search #search_widget form { height: 100%; } .search #search_widget input[type=text] { position: relative; left: 24px; height: 30px; border-bottom: none; margin: 10px; } .search #search_widget::after { bottom: 17px; left: 10px; font-size: 15px; } .logo_image img { width: 134px; margin-top: 8px; } .logo_image .slogan { font-size: 12px; margin-top: -4px; } .account .picto, .cart .picto { align-items: center; height: 50px; font-size: 22px; padding-bottom: 0; } } @media screen and (max-width: 480px) { body { padding-top: 80px; } .header_container_fixed { top: -30px; } .header { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas: "tchat tchat tchat tchat phone phone phone phone" "menu search logo logo logo logo account cart"; grid-template-rows: 30px 50px; height: 80px; } .tutos, .diag, .blog, .faq, .wishlist, .contact, .tchat .subtitle, .phone .subtitle { display: none; } .tchat .fa-comments, .phone .fa-phone { width: 22px; height: 30px; font-size: 14px; line-height: 30px; margin-right: 6px; padding-left: 4px; } .tchat .title, .phone .title { height: 30px; font-size: 14px; line-height: 30px; } .menu .picto { height: 50px; font-size: 30px; } .menu .picto, .menu .title { display: none; } .menu .green_bar { display: block; width: 100%; height: 3px; background: #4C958B; margin-bottom: 6px; border-radius: 1px; } .menu .layout_layout1 .ets_mm_megamenu_content_content .mm_menus_li { height: auto; position: relative; top: -1px; } .menu .layout_layout1 .ets_mm_megamenu_content_content .mm_menus_ul { top: calc(100% + 1px); } #search_button_mobile { font-size: 20px; padding: 16px; } .search #search_widget { width: 100%; border-right: 1px solid #F1F1F1; } .search #search_widget::after { content: ''; } .search #search_widget input[type=text] { display: block; min-width: 100%; left: 0; } .search #search_widget input[type=text]::placeholder { opacity: 0; } .logo_image img { width: 112px; margin: 12px 0 2px 0; } .logo_image .slogan { font-size: 10px; } .account .picto, .cart .picto { height: 50px; font-size: 20px; } .cart #nb_products_in_cart { top: 6px; right: 3px; width: 15px; height: 15px; font-size: 10px; padding: 0px; } } */ /* REFONTE HEADER ET CATEGORIES 2021 */ @media (min-width: 481px) { #header_60 { height: 60px; } #header_fixed { position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 141px; background: #FFF; } .header_avantages_container { position: relative; width: 100%; height: 60px; background: #F1F1F1; padding-left: calc((100% - 1110px) / 2); } #header_avantages_mask { position: relative; width: 1109px; height: 60px; overflow: hidden; } #header_avantages { display: -webkit-box; display: -ms-flexbox; display: flex; width: 1942.5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: slideToLeft 12s cubic-bezier(.25,.75,.5,1.25) infinite alternate; animation: slideToLeft 12s cubic-bezier(.25,.75,.5,1.25) infinite alternate; animation-delay: 3s; } #header_avantages div { position: relative; display: inline-block; width: calc(1110px / 4); height: 60px; border-right: 1px solid #FFF; } #header_avantages div i { display: block; float: left; width: 20%; height: 60px; font-size: 32px; color: #EF9D51; padding: 14px 10px 10px 12px; } #header_avantages div .titre { display: block; float: left; width: 80%; height: 28px; font-size: 14px; color: #626568; line-height: 36px; } #header_avantages div .texte { display: block; float: left; width: 80%; height: 32px; font-size: 11px; color: #626568; line-height: 10px; } @keyframes slideToLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 5%, 10% { -webkit-transform: translateX(0); transform: translateX(0); } 30%, 40% { -webkit-transform: translateX(-277.5px); transform: translateX(-277.5px); } 60%, 70% { -webkit-transform: translateX(-555px); transform: translateX(-555px); } 90%, 100% { -webkit-transform: translateX(-832.5px); transform: translateX(-832.5px); } } #header .header-nav { width: 100%; max-height: 81px; margin-bottom: 0; border-bottom: 1px solid #F1F1F1; } .header_btn { display: inline-block; float: left; height: 80px; border-right: 1px solid #F1F1F1; padding-top: 16px; padding-left: 0; padding-right: 0; text-align: center; } .header_btn:hover { background: #FBFBFB; } /* BOUTON MENU */ /* .ets_mm_megamenu { margin-top: 0; height: 80px; } .layout_layout1 .ets_mm_megamenu_content { border-top: 1px solid #F1F1F1; border-bottom: none; } #header_btn_menu { padding: 0; border-left: 1px solid #F1F1F1; } .header_btn i { display: block; font-size: 30px; color: #61D0C4; } .header_btn .title { display: block; font-size: 11px; color: #626568; margin-top: 5px; } .header_btn_menu_link_a .title { margin-top: 3px !important; } #header_btn_menu .mm_menu_li, #header_btn_menu .layout_layout1 .mm_menus_li:last-child { border-right: none !important; } .header_btn_menu_link_a { height: 78px; padding-top: 18px; background: #FFF; font-weight: normal !important; } .header_btn_menu_link_a:hover { cursor: pointer; background: #FBFBFB !important; } #header_search { display: inline-block; float: left; height: 80px; padding: 12px 0 0 20px; border-right: 1px solid #F1F1F1; } .search-widget { float: left; } .search-widget form input[type=text] { min-width: 218px; width: 218px; height: 30px; padding: 0; background: none; font-size: 16px; color: #B5B5B5; border-bottom: 1px solid #61D0C4; } .search-widget form button[type=submit] { position: absolute; background: none; border: none; bottom: 0; right: -8px; color: #B5B5B5; } .search-widget form button[type=submit]:hover, .search-widget form button[type=submit]:focus { color: #61D0C4 !important; } #header_logo { display: inline-block; float: left; height: 80px; text-align: center; padding-top: 10px; border-right: 1px solid #F1F1F1; } #header_logo img { display: block; width: 180px !important; height: auto; margin: 6px auto 0 auto; } #header_slogan { font-size: 17px; color: #61D0C4; } #header_btn_cart .blockcart { background: none !important; padding: 0 !important; margin: 0 !important; } #account_slider { display: none; position: absolute; top: 81px; left: -60%; width: 160%; height: 60px; background: #404040; } #account_slider a { display: block; height: 30px; color: #FFF !important; text-align: left; padding: 7px; font-size: 13px; } #account_slider a:first-child { border-bottom: 1px solid #FFF; } #account_slider .fa-sign-out { float: left; font-size: 18px; color: #FFF; margin-top: -2px; margin-right: 6px; } #account_slider a:hover { color: #61D0C4; } #header_btn_cart i { position: relative; } #mobile_cart_products { float: left; width: 100%; max-height: 50vh; padding: 4px; background: #FFF; overflow-y: auto; } .mcp_line { float: left; width: 100%; height: 100px; border-bottom: 1px solid #EF9D51; } .mcp_line:last-child { border: none; } .mcp_img { float: left; width: 100px; height: 100px; border-right: 1px dashed #F1F1F1; } .mcp_img img { width: 80px; height: 80px; margin: 10px 0; } .mcp_name { float: left; width: calc(100% - 110px); height: 70px; white-space: initial; padding: 10px; text-align: left; color: #626568; border-bottom: 1px dashed #F1F1F1; } .mcp_link { color: #626568 !important; } .mcp_link:hover, .mcp_link:focus { color: #61D0C4 !important; } .mcp_qty { float: left; height: 30px; padding: 6px; color: #626568; border-right: 1px dashed #F1F1F1; } .mcp_price { float: left; height: 30px; padding: 6px; color: #61D0C4; font-weight: 600; border-right: 1px dashed #F1F1F1; } .mcp_delete { float: right; padding: 6px; } .mcp_delete_product { border: none; background: none; } .mcp_delete_product:focus { outline: none; } #mcp_delete_icon { font-size: 16px; color: #626568; } .mcp_total { float: left; width: 100%; height: 26px; background: #FFF; margin: 5px 0 0 0; text-align: right; font-size: 16px; padding: 6px; } #mobile_cart_btn_view { display: block; float: left; width: 100%; height: 30px; text-align: center; background: #EF9D51; color: #FFF !important; font-size: 16px; margin: 5px 1% 0 0; padding: 7px; } #mobile_cart_btn_submit { display: block; float: left; width: 50%; height: 30px; text-align: center; background: #EF9D51; color: #FFF !important; font-size: 18px; margin: 5px 0 0 0; padding: 7px; } */ /* HEADER 2 BANDEAU GRIS */ /* #header_2 { width: 100%; height: 36px; background: #F1F1F1; padding-left: calc((100% - 1110px) / 2); padding-right: calc((100% - 1110px) / 2); text-align: center; margin-top: 141px; } #header_2 a { float: left; height: 36px; font-size: 14px; color: #404040; text-decoration: none; line-height: 38px; padding: 0 26px; border-right: 1px solid #FFF; } #header_2 a:hover { color: #404040 !important; background: #FFF; } #header_2 a i { color: #61D0C4; } #message_header { padding: 12px 0; } #message_header:not(#index #message_header) { border-bottom: 1px solid #EF9D51; } #message_header p { text-align: center; font-size: 15px; color: #EF9D51; line-height: 1; margin: 0; } #message_header p small { color: #626568; } #phone { float: right !important; font-size: 18px !important; padding: 0 !important; border-right: none !important; transition: .3s ease; } #phone:hover { padding: 0 20px 0 21px !important; color: #626568 !important; transition: .3s ease; } #phone:hover > i { color: #EF9D51; } */ } /* @media (max-width: 480px) { .header_avantages_container { position: relative; width: 100%; height: 28px; background: #F1F1F1; } #header_avantages_mask { position: relative; width: 100%; height: 28px; overflow: hidden; } #header_avantages { display: -webkit-box; display: -ms-flexbox; display: flex; width: 300%; cursor: grabbing; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: slideToLeft 12s cubic-bezier(.25,.75,.5,1.25) infinite alternate; animation: slideToLeft 12s cubic-bezier(.25,.75,.5,1.25) infinite alternate; animation-delay: 3s; } #header_60 { height: 28px; } #header_fixed { position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 79px; background: #FFF; } #header_satisfaction_client { display: none !important; } #header_avantages div { position: relative; display: inline-block; width: 50%; height: 28px; border-right: 1px solid #FFF; text-align: center; padding-top: 6px; } #header_avantages div i { display: inline-block; width: auto; height: 28px; font-size: 16px; color: #EF9D51; margin-right: 4px; } #header_avantages div .titre { display: inline-block; width: auto; height: 28px; font-size: 13px; color: #626568; vertical-align: 2px; } #header_avantages div .texte { display: none; } @keyframes slideToLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 5%, 10% { -webkit-transform: translateX(0); transform: translateX(0); } 20%, 30% { -webkit-transform: translateX(-16.66%); transform: translateX(-16.66%); } 40%, 60% { -webkit-transform: translateX(-33.32%); transform: translateX(-33.32%); } 70%, 80% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 90%, 100% { -webkit-transform: translateX(-66.66%); transform: translateX(-66.66%); } } #header .header-nav { width: 100%; max-height: 51px; border-bottom: 1px solid #F1F1F1; } .header-nav .container { padding: 0; } .header_btn { height: 50px; padding: 0; } #header_btn_menu { float: left; width: 50px; } #header_btn_search, #header_btn_account, #header_btn_cart { position: relative; float: left; width: 50px; text-align: center; padding-top: 16px; } #header_btn_search i, #header_btn_account i, #header_btn_cart i { font-size: 20px; color: #61D0C4; } #header_btn_search { border-right: 1px solid #F1F1F1; } .search-widget form input[type=text] { max-width: 100%; border: none; padding: 0; } #header_logo { float: left; width: calc(100% - 200px); text-align: center; padding: 10px 0 0 0; } #header_slogan { display: block; width: 100%; color: #61D0C4; font-size: 2.8vw; } #header_btn_account { position: relative; border-left: 1px solid #F1F1F1; } #account_slider { position: absolute; display: none; top: 51px; left: -152%; width: 350%; height: 80px; background: #404040; } #account_slider a { display: block; height: 41px; color: #FFF; text-align: left; padding: 12px; font-size: 14px; } #account_slider a:first-child { border-bottom: 1px solid #FFF; } #account_slider .fa-sign-out { float: left; font-size: 18px; color: #FFF; margin-top: -2px; margin-right: 6px; } #account_slider a:hover { color: #61D0C4; } #header_btn_cart { padding-top: 3px; border-left: 1px solid #F1F1F1; } #header_btn_cart #nb_products_in_cart { display: block; position: absolute; top: 10px; right: 8px; min-width: 12px; height: 12px; border-radius: 50%; background: #EF9D51; font-family: 'Calibri'; font-size: 10px; text-align: center; color: #FFF; line-height: 12px; } #message_header { background: #FFF; } #message_header:not(#index #message_header) { border-bottom: 1px solid #EF9D51; } #message_header p { text-align: center; padding: 6px 10px; color: #EF9D51; margin: 0; } #message_header p small { color: #626568; } .ets_mm_megamenu { margin: 0; } .layout_layout1 .ets_mm_megamenu_content { border: none; } .ets_mm_megamenu_content_content { display: block !important; width: 50px; height: 51px; } .ets_mm_megamenu .container { background-color: transparent; } .ybc-menu-toggle { height: 50px; text-align: center; } .ybc-menu-button-toggle_icon { margin: 0; } .header_btn .title { display: none; } .header_btn_menu_link_a, .mm_menus_li .arrow { display: none; } #mobile_menu_features_search { display: none; width: 100%; height: 46px; padding: 5px 6px 5px 5px; background: #F1F1F1; } #mmf_search { display: block; float: left; width: 100%; height: 36px; border: none; padding-left: 6px; } #mmf_search_btn_submit { position: absolute; top: 14px; right: 10px; border: none; background: none; } #mmf_search_btn_submit i { font-size: 18px; color: #EF9D51; } #mobile_menu_features_buttons { width: 100%; height: 120px; padding: 5px; background: #F1F1F1; } #mmf_buttons { float: left; width: 100%; padding-right: 4px; padding-bottom: 180px; } .mmf_btn { display: block; float: left; height: 50px; margin: 5px 5px 0 0; background: #FFF; text-align: center; padding-top: 10px; } .mmf_btn_1 { width: calc((100% - 5px) / 2); } .mmf_btn_2 { width: calc((100% - 15px) / 4); } .mmf_btn i { font-size: 20px; color: #EF9D51; } .mmf_btn span { display: block; width: 100%; font-size: 10px; color: #626568; } */ /* PANIER */ /* #cart-preview_mask { position: fixed; display: none; top: 0; left: 0; z-index: 1998; width: 100vw; height: 100vh; background: rgba(52,75,72,0.5); cursor: default; } #cart-preview_over_mask { position: relative; float: left; z-index: 1999; width: 100%; padding: 6px; background: #EBEBEB; } .blockcart { position: relative; } .cart-hover-content { display: block; position: absolute; z-index: 2000; top: 48px; right: 0; width: 100vw; background: #F1F1F1; } #mobile_cart_content { padding: 10px; } .nb_cart_products { display: block; float: left; width: calc(100% - 36px); height: 30px; background: #FFF; padding: 8px; text-align: left; margin-bottom: 6px; font-size: 14px; color: #EF9D51; } #close_cart_btn { display: block; float: left; width: 30px; height: 30px; margin-left: 6px; padding-top: 6px; background: #FFF; } #close_cart_btn .close_cart_btn_icon { font-size: 20px; color: #EF9D51; } .cart-hover-content .cart-products { padding: 10px; background: #FFF; } #mobile_cart_products { float: left; width: 100%; max-height: 60vh; background: #FFF; overflow-y: auto; } .mcp_line { float: left; width: 100%; height: 100px; border-bottom: 1px solid #EF9D51; } .mcp_line:last-child { border: none; } .mcp_img { float: left; width: 100px; height: 100px; border-right: 1px dashed #F1F1F1; } .mcp_img img { width: 80px; height: 80px; margin: 10px 0; } .mcp_name { float: left; width: calc(100% - 110px); height: 70px; white-space: initial; padding: 10px; text-align: left; color: #626568; border-bottom: 1px dashed #F1F1F1; } .mcp_qty { float: left; height: 30px; padding: 6px; color: #626568; border-right: 1px dashed #F1F1F1; } .mcp_price { float: left; height: 30px; padding: 6px; color: #61D0C4; font-weight: 600; border-right: 1px dashed #F1F1F1; } .mcp_delete { float: right; padding: 6px; } .mcp_delete_product { border: none; background: none; } .mcp_delete_product:focus { outline: none; } #mcp_delete_icon { font-size: 16px; color: #626568; } .mcp_total { float: left; width: 100%; height: 26px; background: #FFF; margin: 5px 0 0 0; text-align: right; font-size: 16px; padding: 6px; } #mobile_cart_btn_view { display: block; float: left; width: 49%; height: 30px; text-align: center; background: #626568; color: #FFF !important; font-size: 18px; margin: 5px 1% 0 0; padding: 7px; } #mobile_cart_btn_submit { display: block; float: left; width: 50%; height: 30px; text-align: center; background: #EF9D51; color: #FFF !important; font-size: 18px; margin: 5px 0 0 0; padding: 7px; } */ } /* CHANGEMENTS DE POSITION AU SCROLL */ #header_btn_tutos, #header_btn_diag, #header_btn_blog, #header_btn_faq { display: none; } .header_av_fixed_top { position: relative; } .header_av_fixed_bottom { position: fixed; z-index: 100; bottom: 0; left: 0; } .av_white_line::before { content: ""; position: absolute; display: block; left: 0; top: -10px; width: 100vw; height: 10px; background: #FFF; } .header_nav_not_fixed { position: relative; } .header_nav_fixed_top { /*position: fixed; z-index: 100; top: 0; max-height: 61px !important;*/ } .header_nav_fixed_top::after { content: ""; display: block; width: 100%; height: 6px; background: #F1F1F1; } /* ETS MEGAMENU */ /* .mm_columns_ul { width: calc(((100% + 2px) * 12) - 1px) !important; height: auto !important; margin-top: -1px !important; } .mm_tab_li_content, .mm_columns_contents_ul { border-color: #F1F1F1 !important; } .mm_tab_toggle_title { width: 100%; padding: 9px 15px 9px 50px; text-align: left; font-size: 14px; color: #404040; transition: .3s ease; } @media (min-width: 480px) { .mm_tab_toggle_title:hover { padding-left: 56px; transition: .3s ease; } } .mm_columns_ul .mm_tabs_li:nth-child(-n+5) .mm_tab_name, .mm_columns_ul .mm_tabs_li:nth-last-child(-n+2) .mm_tab_name { font-weight: 600; } .mm_custom_tab_icon { position: absolute; top: 10px; left: 10px; width: 20px !important; } @media (max-width: 767px) { .mm_custom_tab_icon { position: absolute; top: 10px; left: 18px; width: 22px !important; } .mm_tabs_li .mm_columns_contents_ul { padding: 15px; background-image: none !important; background-color: #FFF; } .mm_menus_ul { width: 100vw; height: 100vh; padding-bottom: 200px; overflow-x: scroll; -webkit-overflow-scrolling: touch; } .ets_mm_block_content a { font-size: 15px; } .ets_mm_block_content a { display: block; padding: 8px 0 2px 0; border-bottom: 1px dashed #F1F1F1; } .mm_tab_toggle_title { font-size: 16px; } } .mm_blocks_li { padding: 0 6px !important; } .ets_mm_block .menu_h4_back { height: 16px; background: #F1F1F1; text-align: left; color: #61D0C4 !important; border: none; padding: 0; margin-bottom: 10px; } .ets_mm_block .menu_h4_text a { display: block; float: left; height: 16px; background: #FFF; color: #61D0C4 !important; margin: 0; padding-right: 6px; line-height: 16px; } .ets_mm_block_content { text-align: left; } .ets_mm_block_content a { line-height: 25px; transition: .3s ease; } .ets_mm_block_content br { display: block; content: ""; margin-top: -5px; } @media (min-width: 768px){ .ets_mm_block_content a:hover, .ets_mm_block_content a:focus { position: relative; left: 3px; color : #61D0C4 !important; transition: .3s ease; } } */ /* BREADCRUMBS FIL ARIANE */ #cart #fil_ariane { display: none; } #fil_ariane { padding: 10px calc((100% - 1110px) / 2) 8px calc((100% - 1110px) / 2); } #fil_ariane .breadcrumb { padding: 0; margin: 0 0 0 4px; background: none; } #fil_ariane ol { list-style: none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0; } #fil_ariane li { display: block; float: left; } #fil_ariane li a { display: block; float: left; font-size: 12px; color: #626568; margin-right: 12px; } #fil_ariane li a:hover { text-decoration: underline; } #fil_ariane li .last_item { font-size: 12px; } #fil_ariane li .fa-angle-right { font-size: 12px; margin-right: 10px; vertical-align: 0px; color: #626568; } #fil_ariane .last_item { display: block; float: left; margin-top: -0.5px; } @media (max-width: 767px) { #fil_ariane { padding: 2px 8px 8px 8px; margin-top: 10px; } #fil_ariane li a { font-size: 10px; } #fil_ariane li .last_item { font-size: 10px; } } /* BANNIERE */ .banniere { position: relative; width: 100%; aspect-ratio: 48 / 2; padding: 0 calc((100% - 1110px) / 2); background: #111; /* background: #F1F1F1; background: -webkit-linear-gradient(top, #F1F1F1 0%,#FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, from(#F1F1F1),to(#FFFFFF)); background: linear-gradient(to bottom, #F1F1F1 0%,#FFFFFF 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#FFFFFF',GradientType=0 ); */ } .banniere #image { width: 100%; } @media (min-width: 1024px) { .banniere { min-height: 107px; } } @media (max-width: 767px) { .banniere { overflow: hidden; aspect-ratio: 21 / 2; } .banniere #image { width: 100%; } } /* BANDEAU MENU VERT */ @media (min-width: 481px) { #product #content-wrapper, #category #content-wrapper { margin-top: 80px; } } .bandeau_menu_vert { position: relative; z-index: 1; width: 100%; height: 40px; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, #61D0C4 50%, #61D0C4 100%); } #mv_top_links { position: relative; width: 1110px; height: 40px; margin: 0 calc((100% - 1110px) / 2); margin-bottom: 100px; background: #61D0C4; } #mv_left_tr { position: absolute; top: 50%; left: -20px; width: 0; height: 0; border-color: #61D0C4 #61D0C4 transparent transparent; border-style: solid; border-width: 10px; } #mv_right_tr { position: absolute; top: 50%; right: -20px; width: 0; height: 0; border-color: #61D0C4 transparent transparent #61D0C5; border-style: solid; border-width: 10px; } .mv_top_link { display: block; position: relative; float: left; height: 40px; line-height: 40px; font-size: 14px; color: #FFF; text-align: center; text-decoration: none; padding: 0 20px; transition: .2s ease-in-out; } .mv_top_link:hover, .mv_top_link:focus { color: #404040; transition: .2s ease-in-out; } .mv_top_link .fa-chevron-down { display: none; } .mv_top_link_selected { color: #404040; } .mv_top_link_wt_visible { display: block; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 8px solid #FFF; margin: -8px calc((100% - 36px) / 2); } .mv_bottom_links { position: absolute; display: block; top: -60px; left: 27px; z-index: -1; opacity: 0; width: 1110px; height: 100px; margin: 0 calc((100% - 1110px) / 2); } .mv_bottom_links_visible { top: 40px; opacity: 1; } .mv_bottom_link { position: relative; display: inline-block; text-align: center; text-decoration: none; padding: 10px 24px 12px 24px; } .mv_bottom_link:first-child { padding-left: 0; } .mv_bottom_link img { width: 38px; margin: 8px 0; } .mv_bottom_link span { display: block; font-size: 12px; color: #626568; text-decoration: none; } @media (min-width: 767px) and (max-width: 1024px) { #mv_top_links, .mv_bottom_links { width: calc(100% - 54px) !important; margin: 0 auto !important; } .mv_top_link { padding: 0 16px; } .mv_bottom_link { padding: 10px 20px 12px 20px; } } @media (max-width: 768px) { .mv_top_link { padding: 0 7px; } .mv_bottom_link { padding: 10px 8px 12px 8px; } } @media (max-width: 767px) { .bandeau_menu_vert { height: auto; } #mv_top_links { width: 100%; height: auto; margin: 6px 0 0 0; background: #FFF; border-top: 1px solid #F1F1F1; } #mv_left_tr, #mv_right_tr { display: none; } .mv_top_link { float: initial; width: 100%; height: 34px; color: #404040; border-bottom: 1px solid #F1F1F1; text-align: left; padding-left: 30px; padding-right: 20px; line-height: 34px; font-size: 16px; } .mv_top_link_selected { color: #61D0C4; } /* .mv_top_link:hover, .mv_top_link:focus { color: #61D0C4; } */ .mv_top_link_wt_visible { display: none; } .mv_top_link .fa-chevron-down { display: block; float: right; height: 30px; font-size: 16px; line-height: 35px; color: #939191; } .mv_top_link_chevron_down { transform: rotate(0deg); line-height: 35px; transition: .3s linear; } .mv_top_link_chevron_up { transform: rotate(180deg); line-height: 27px !important; transition: .3s linear; } .mv_bottom_links { position: relative; display: none; z-index: 1; opacity: 1; top: 0; left: 0; width: 100%; height: auto; margin: 0; background: #F1F1F1; overflow: hidden; } .mv_bottom_links_visible { display: none; } .mv_bottom_link { display: block; float: left; width: 100%; height: 28px; padding: 5px 10px 0 36px !important; text-align: left; } .mv_bottom_link:not(:last-child) { border-bottom: 1px solid #FFF; } .mv_bottom_link img { display: none; } .mv_bottom_link span { font-size: 15px; } .mv_bottom_link_selected { background: #FFF; } .mv_bottom_link_selected span { color: #61D0C4 !important; } } /* BOUTONS CHOIX DES MARQUES ET MODELES LEVEL_DEPTH 2-3-4 */ #category_models { margin: 0 -25px 30px -15px; } .cm_model { min-height: 157px; padding: 0; background: #FFF; margin-bottom: 10px; } .cm_model a { display: block; position: relative; float: left; width: calc(100% - 10px); height: 157px; background-color: #F1F1F1; } .link_background { background-size: 1110px 107px; background-repeat: no-repeat; background-position: -760px 0; transition: .5s ease-in-out; } .cm_model .link_background:hover { background-position: -730px 0; transition: .5s ease-in-out; } .cm_model .level4 { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; transition: .3s ease-in-out; } .cm_model .level4:hover { background-position: -20px 0; transition: .5s ease-in-out; } .cm_title { position: relative; float: left; width: 100%; height: 50px; margin: 107px 0 0 0; background: #FFF; text-align: left; font-size: 18px; color: #404040; padding: 10px; border: 2px solid #F1F1F1; transition: .5s ease-in-out; } .cm_model a:hover > .cm_title { padding-left: 18px; transition: .5s ease-in-out; } @media (max-width: 767px) { #category_models { width: calc(100% + 8px); margin: 0; } .cm_model a { width: calc(100% - 8px); } .cm_model .level4 { background-position: -20px 3px; background-size: 272px 107px; background-repeat: no-repeat; transition: .3s ease-in-out; } } /* PRODUITS PAR COLONNE DANS LES CATEGORIES */ .products_in_category { position: relative; z-index: 1; display: flex; width: calc(100% + 40px); flex-wrap: wrap; align-content: flex-end; align-items: stretch; } .pic_product_container_1 { background: #FFF; margin-bottom: 10px; padding: 0; } .pic_product_container_2 { position: relative; width: calc(100% - 10px); height: 100%; background: #F1F1F1; padding-bottom: 6px; } .pic_pdt_preorder_message { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 42px; background: rgba(239, 157, 81, 0.8); padding: 5px; font-size: 13px; color: #FFF; } .pic_pdt_preorder_message .fa-warehouse { display: block; float: left; font-size: 20px; margin: 7px 10px 0 5px; } .pic_pdt_img_link { display: block; position: relative; width: 100%; height: auto; padding-top: 20px; padding-left: calc((100% - 180px) / 2); } .pic_images_slider_mask { width: 180px; height: 180px; overflow: hidden; } .pic_images_slider { float: left; width: 360px; height: 180px; } .pic_pdt_img_1 { float: left; width: 176px; height: 176px; margin: 2px !important; mix-blend-mode: multiply; } .pic_pdt_img_2 { float: left; width: 176px; height: 176px; margin: 2px !important; mix-blend-mode: multiply; } .pic_pdt_name { display: block; float: left; width: calc(100% - 28px); min-height: 60px; margin: 14px 14px 6px 14px; font-size: 14px; font-weight: 600; color: #404040; border-bottom: 2px solid #FFF; padding-bottom: 6px; } .pic_pdt_description_short { float: left; width: calc(100% - 28px); min-height: 80px; margin: 4px 14px 6px 14px; } .pic_pdt_description_short p { font-size: 12px; color: #404040; line-height: 15px; } .pic_pdt_price_add_to_cart { float: left; width: calc(100% - 28px); height: 30px; margin: 4px 14px 6px 14px; border-bottom: 1px solid #404040; overflow: hidden; } .pic_pdt_price { float: left; width: 60%; height: 30px; font-size: 22px; color: #61D0C4; font-weight: 600; padding: 8px 0 0 0; } .pic_pdt_price .currency { font-size: 16px; margin-left: -4px; } .pic_pdt_price .ttc { position: relative; font-size: 10px; color: #626568; margin-left: 2px; vertical-align: 0px; } .pic_pdt_price_old { position: absolute; top: -15px; right: -18px; font-size: 12px; color: #404040; font-weight: 400; } .pic_pdt_price_old:before { position: absolute; content: ""; left: 0; top: 50%; right: 0; border-top: 1px solid; border-color: inherit; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg); } .pic_pdt_price_old .currency { font-weight: 400; font-size: 12px; margin-left: -4px; } .pic_pdt_add_to_cart { float: right; width: 40%; height: 30px; } .pic_pdt_cart_btn { width: 100%; height: 29px; padding: 8px 0 0 0; text-align: center; border: none; /*background: linear-gradient(to top, #61D0C4 50%, #404040 50%);*/ background: linear-gradient(to top, #4C958B 50%, #61D0C4 50%); background-size: 100% 200%; background-position: left top; transition: all .3s ease-in-out; } .pic_pdt_cart_btn:hover { background-position: right bottom; border: none; } .pic_pdt_cart_btn:focus { outline: none; border: none; } .pic_pdt_cart_btn .label { display: inline-block; height: 30px; font-size: 14px; color: #FFF; font-weight: 400; } .pic_pdt_cart_btn .fa-shopping-basket { font-size: 14px; color: #FFF; vertical-align: 0px; } /* .pic_pdt_cart_btn:hover > .label, .pic_pdt_cart_btn:hover > .fa-shopping-basket { color: #61D0C4; } */ .pic_pdt_stock { float: left; width: calc(100% - 28px); height: 26px; margin: 0 14px; font-size: 12px; color: #404040; line-height: 20px; } .pic_pdt_stock .fa-warehouse { margin-right: 2px; vertical-align: 1px; } .pic_pdt_rating { float: left; width: calc(100% - 28px); margin: -12px 14px -20px 14px; } .pic_pdt_rating .netreviews_review_rate_and_stars { width: 60px !important; margin-right: 4px; } .pic_pdt_rating .grey { color: #626568 !important; } .pic_pdt_rating .gold { color: #EF9D51 !important; } .pic_pdt_rating .nr-star::before { font-size: 12px !important; } .pic_pdt_rating .ratingText { font-size: 11px; color: #404040; text-decoration: underline; vertical-align: 7px !important; } .skeepers_product__stars .stars__item { width: 12px !important; height: 13px !important; border-radius: 12px; } .skeepers_product__stars .stars__rating { line-height: 14px; } .skeepers_product__stars .skeepers_product__stars span { font-size: 11px; } .skeepers_product__stars .stars__rating .rate-aggregate, .skeepers_product__stars .stars__rating .rate-aggregate__separator, .skeepers_product__stars .stars__rating .rate-aggregate__max { display: none; } #pic_rea_message { padding: 10px; background: #EF9D51; color: #FFF; margin: -10px 10px 10px 0px; } @media (max-width: 767px) { .products_in_category { width: calc(100% + 30px); } .pic_product_container_1:nth-child(even) { padding: 0 3px 0 6px; margin-bottom: 6px; } .pic_product_container_1:nth-child(odd) { padding: 0 6px 0 3px; margin-bottom: 6px; } .pic_product_container_2 { width: 100%; } .pic_pdt_preorder_message { width: 100%; font-size: 10px; } .pic_pdt_preorder_message .fa-warehouse { font-size: 14px; margin: 8px 7px 0 2px; } .pic_pdt_img_link { padding-top: 10px; padding-left: calc((100% - 130px) / 2); } .pic_images_slider_mask { width: 130px; height: 130px; } .pic_images_slider { width: 260px; height: 130px; } .pic_pdt_img_1 { width: 126px; height: 126px; } .pic_pdt_img_2 { width: 126px; height: 126px; } .pic_pdt_name { margin: 14px 14px 6px 14px; } .pic_pdt_description_short { display: block; width: calc(100% - 28px); margin: 4px 14px 6px 14px; } .pic_pdt_description_short p { font-size: 12px; color: #404040; line-height: 15px; } .pic_pdt_price { width: 65%; font-size: 18px; } .pic_pdt_add_to_cart { width: 35%; } .pic_pdt_price_add_to_cart { border-bottom: 2px solid #404040; } .pic_pdt_cart_btn .label { display: none; } .pic_pdt_cart_btn .fa-shopping-basket { vertical-align: 6px; } .pic_pdt_stock { } .pic_pdt_rating { margin: -6px 0 4px 14px; } .pic_pdt_rating .ratingText { width: auto; text-align: left; } .pic_pdt_rating .av_category_stars { float: left; } } /* PAGE PRODUIT */ #pdt_page { position: relative; margin: 14px 0 0 0; } #pdt_page button:focus { outline: none; } #pdtp_titles { padding: 0; border-top: 1px dashed #B5B5B5; border-bottom: 1px dashed #B5B5B5; margin: 10px 0 20px 0; overflow: hidden; } #pdtp_titles .pdtp_name { float: left; width: calc(100% - 240px); font-size: 22px; color: #404040; margin: 10px 0; } #pdtp_titles .pdtp_description_short { float: left; width: calc(100% - 240px); font-size: 14px; color: #626568; } #pdtp_titles .pdtp_description_short p { margin: 0; line-height: 16px; } #pdtp_titles .pdtp_ref_zone { float: right; width: 240px; text-align: right; padding: 6px 0 0 0; color: #B5B5B5; } #pdtp_titles .pdtp_average { text-align: right; padding-top: 18px; } #pdtp_titles .social-sharing { display: none; } #pdtp_titles .pdtp_average .netreviews_stars_light { float: right; width: 70px; } #pdtp_titles .pdtp_average .netreviews_stars_light #slide { left: -60px; position: absolute; bottom: 1px; line-height: 18px; } #pdtp_titles .pdtp_average .gold { color: #EF9D51 ! important; } #pdtp_titles .pdtp_average .nr-star:before { font-size: 14px; } .pdtp_social_sharing { position: absolute; top: 24px; right: 4px; } .pdtp_social_sharing .netreviews_stars_light { display: none; } #pdtp_images .product-cover { margin: 0; border: 1px solid #F1F1F1; overflow: hidden; } #pdtp_images .js-qv-product-cover { width: 90%; margin: 5%; border: none; } #pdtp_images .js-qv-mask { background: #F1F1F1; margin-top: 6px; } #pdtp_images .js-qv-mask.scroll { width: calc(100% - 48px) !important; transition: .5s ease; } #pdtp_images .js-qv-mask ul { margin: 0; } #pdtp_images .thumb { width: 70px; height: auto; margin: 5px 0 5px 5px; box-shadow: none; } #pdtp_images .scroll-box-arrows i { position: absolute; bottom: 0; height: 80px; line-height: 80px; cursor: pointer; background: #F1F1F1; } #pdtp_images .scroll-box-arrows .right { right: 8px; } #pdtp_infos { z-index: 1; padding-left: 8px; } #pdtp_infos .pdtp_infos_title { position: relative; z-index: 2; width: 60%; font-size: 16px; color: #626568; padding: 2px 4px; border-bottom: 1px solid #B5B5B5; background: #FFF; } #pdtp_infos .pdtp_plus_produit { padding: 6px 10px; margin: 0 0 6px 20px; } #pdtp_infos .pdtp_plus_produit ul { margin: 0; } #pdtp_infos .pdtp_plus_produit ul li { position: relative; display: flex; font-size: 14px; padding: 4px 0 4px 0; } #pdtp_infos .pdtp_plus_produit ul li::before { content: ""; position: absolute; display: block; top: -12px; left: -19px; width: 10px; height: 24px; border-left: 1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; } #pdtp_infos .pdtp_plus_produit ul li .fa-check-square { color: #EF9D51; margin: 0 6px 0 -6px; } #pdtp_infos .pdtp_reparation { margin-left: 20px; } #pdtp_infos .pdtp_rep_time_diff { position: relative; float: left; width: 38%; margin: 6px 0 4px 0; } #pdtp_infos .time::before { content: ""; position: absolute; display: block; top: -6px; left: -8px; width: 14px; height: 32px; border-left: 1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; } #pdtp_infos .pdtp_rep_time_diff img { float: left; width: 50px; } #pdtp_infos .pdtp_rep_time_diff .text { float: left; width: calc(100% - 50px); font-size: 14px; margin: 8px 0 2px 0; } #pdtp_infos .pdtp_rep_time_diff .value { float: left; font-size: 1rem; color: #EF9D51; } #pdtp_infos .pdtp_tutos { float: left; width: 100%; } #pdtp_infos .pdtp_tutos .tuto_links { display: flex; flex-direction: column; margin: 0 0 0 14px; } #pdtp_infos .pdtp_tutos .tuto_link { position: relative; display: inline-flex; height: 30px; } #pdtp_infos .pdtp_tutos .tuto_link::before { content: ""; position: absolute; display: block; top: -33px; left: -22px; width: 14px; height: 44px; border-left: 1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; } #pdtp_infos .pdtp_tutos .tuto_link:hover > .icon, #pdtp_infos .pdtp_tutos .tuto_link:hover > .text { color: #EF9D51; } #pdtp_infos .pdtp_tutos .tuto_link .icon { width: 30px; height: 30px; font-size: 22px; color: #555; } #pdtp_infos .pdtp_tutos .tuto_link .text { display: block; height: 30px; font-size: 14px; color: #626568; padding: 4px 0 0 7px; } #pdtp_infos .pdtp_tutos .tuto_youtube { position: relative; float: left; width: 50%; height: 84px; margin: 6px 0 0 14px; } #pdtp_infos .pdtp_tutos .tuto_youtube::before { content: ""; position: absolute; display: block; top: -28px; left: -22px; width: 14px; height: 68px; border-left: 1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; } #pdtp_infos .pdtp_tutos .tuto_youtube iframe { width: 100%; height: 100%; border-radius: 5px; } #pdtp_texts { padding-right: 8px; margin-top: 16px; } #pdtp_texts .pdtp_pack_items { overflow: hidden; padding: 10px 0 30px 0; } #pdtp_texts .pdtp_pack_items_line { float: left; width: 100%; height: 60px; } #pdtp_texts .pdtp_pack_items_line:not(:last-child) { border-bottom: 1px dashed #F1F1F1; } #pdtp_texts .pdtp_pack_items_line .pil_image { float: left; width: 8%; } #pdtp_texts .pdtp_pack_items_line .pil_image img { width: auto; height: 50px; margin: 5px 0; } #pdtp_texts .pdtp_pack_items_line .pil_name { display: flex; float: left; width: 86%; height: 100%; align-items: center; padding: 0 20px; } #pdtp_texts .pdtp_pack_items_line .pil_quantity { display: flex; float: left; width: 6%; height: 100%; align-items: center; } #pdtp_texts .pdtp_description { padding: 10px 0 30px 0; } #pdtp_texts .pdtp_description p { font-size: 13px; color: #404040; text-align: justify; } #pdtp_texts .pdtp_features { padding: 10px 0 30px 0; } #pdtp_texts .pdtp_features .tab-pane { opacity: 1; } #pdtp_texts .pdtp_diagnostic { padding: 10px 0 30px 10px; font-size: 13px; line-height: 20px; } #pdtp_texts .texts_tabs { color: #FFF !important; } #pdtp_texts .texts_tabs:hover { color: #FFF !important; } .bootstrap-qr .btn { margin: 20px 0 0 4px; } #pdtp_options_and_cart { z-index: 1; width: 370px; } .cart_column { height: 100vh; } #pdtp_options_and_cart .pdtp_options_1 { padding: 8px 8px 4px 8px; background: #F1F1F1; /*border-radius: 0 0 20px 20px;*/ border-radius: 20px; -webkit-box-shadow: 5px 5px 7px -4px #404040; box-shadow: 3px 5px 7px -4px #404040; } #pdtp_options_and_cart .pdtp_options_2 { padding: 8px 8px 4px 8px; margin: 20px 0 0 0; background: #F1F1F1; border-radius: 20px; -webkit-box-shadow: 5px 5px 7px -4px #404040; box-shadow: 3px 5px 7px -4px #404040; } .oac_fixed_top { position: fixed; top: 60px; right: calc((100% - 1110px) / 2); } .oac_fixed_bottom { position: fixed; bottom: 688px; right: calc((100% - 1110px) / 2); } .pdtp_options { position: relative; margin-bottom: 16px; overflow: hidden; } .pdtp_bloc_interlayer { width: 100%; height: 28px; border-bottom: 4px solid #61D0C4; } .pdtp_bloc_interlayer_title { position: relative; float: left; height: 24px; background: #61D0C4; font-size: 15px; color: #FFF; text-transform: uppercase; line-height: 29px; padding: 0 40px 0 10px; border-radius: 11px 0 0 0; } .pdtp_bloc_interlayer_title::after { content: ""; position: absolute; top: -24px; right: -23px; width: 0; height: 0; border-color: transparent #F1F1F1 transparent transparent; border-style: solid; border-width: 20px; transform: rotate(142deg); } .pdtp_bi_texts { border-bottom: 4px solid #626568; } .pdtp_bit_texts { background: #626568; } .pdtp_bit_texts::after { border-color: transparent #FFF transparent transparent; } /* PRIX STOCK BOUTON AJOUT PANIER */ .pdtp_price_stock_add_button { min-height: 86px; overflow: hidden; margin-bottom: 18px; } #bottom_fixed_cart { display: none; } /* #launcher { margin: 10px !important; transition: .6s cubic-bezier(0.86, 0, 0.07, 1); } #product #launcher { bottom: 44px !important; } */ .pdtp_price_stock_add_button .price_container { position: relative; float: left; width: calc(100% - 130px); height: 44px; padding-top: 16px; } .pdtp_price_stock_add_button .price_container .price_total { font-size: 2.2rem; color: #404040; } .pdtp_price_stock_add_button .price_container .currency { font-size: 1.5rem; color: #404040; margin-left: -3px; } .pdtp_price_stock_add_button .price_container .tax { font-size: 0.9rem; color: #404040; margin-left: -3px; } .pdtp_price_stock_add_button .price_old_container { position: absolute; bottom: 5px; right: 0; font-size: 20px; color: #404040; font-weight: 400; } .pdtp_price_stock_add_button .price_old_container:before { position: absolute; content: ""; left: -10%; top: 50%; right: -10%; border-top: 1px solid; border-color: inherit; -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg); transform:rotate(-5deg); } .pdtp_price_stock_add_button .price_old_container .currency { font-size: 16px; margin-left: 0; } .pdtp_price_stock_add_button .stock { float: right; width: 130px; height: 44px; font-size: 1rem; text-align: right; padding-top: 18px; } .pdtp_price_stock_add_button .stock .fa-check { font-size: 16px; color: #61D0C4; } .pdtp_price_stock_add_button .stock .out_of_stock { font-size: 16px; color: #B5B5B5; } .pdtp_price_stock_add_button .stock .fa-check, .pdtp_price_stock_add_button .stock .fa-times { margin-right: 6px; } .pdtp_price_stock_add_button .add_to_cart_buttons_container { float: left; width: 100%; height: 40px; margin-top: 2px; } .pdtp_price_stock_add_button #add_to_cart_quantity_container { position: relative; float: left; width: 40px; height: 40px; border: 1px solid #EF9D51; margin-right: 4px; border-radius: 8px 0 0 8px; } .pdtp_price_stock_add_button #add_to_cart_quantity { width: 40px; height: 40px; background: none; font-size: 16px; color: #404040; padding-left: 4px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .pdtp_price_stock_add_button #add_to_cart_quantity_container:after { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #EF9D51; position: absolute; top: 42%; right: 5px; content: ""; z-index: 98; } .pdtp_price_stock_add_button #add_to_cart_quantity:focus { outline: none; } .pdtp_price_stock_add_button #add_to_cart_quantity option { font-size: 16px; } .pdtp_price_stock_add_button #add_to_cart_btn_container { float: left; width: calc(100% - 88px); height: 40px; background: #EF9D51; } .pdtp_price_stock_add_button .add_to_cart_btn { float: left; width: calc(100% - 88px); height: 40px; background: #EF9D51; border: none; color: #FFF; font-size: 0.9rem; line-height: 39px; overflow: hidden; position: relative; transition: .3s cubic-bezier(0.86, 0, 0.07, 1); } .pdtp_price_stock_add_button .add_to_cart_btn_icon { display: inline-block; font-size: 20px; color: #EF9D51; vertical-align: -2px; margin-left: 40px; margin-right: -80px; transition: .6s cubic-bezier(0.86, 0, 0.07, 1); } .pdtp_price_stock_add_button .add_to_cart_btn:hover .add_to_cart_btn_icon { color: #FFF; margin-left: 6px; margin-right: 0; transition: .6s cubic-bezier(0.86, 0, 0.07, 1); } #add_to_wishlist_button { float: right; width: 40px; height: 40px; border: 1px solid #EF9D51; background: none; line-height: 40px; border-radius: 0 8px 8px 0; color: #EF9D51; text-align: center; } #add_to_wishlist_button:hover { color: #404040; } /* MESSAGES PANIER */ .pdtp_price_stock_add_button_message { position: relative; float: left; width: 100%; height: 36px; font-size: 13px; color: #404040; line-height: 40px; border-bottom: 1px solid #EF9D51; } .pdtp_price_stock_add_button_message .orange { color: #EF9D51; font-weight: 600; } /* PRODUITS EN OPTION */ .pdtp_options_products { overflow: auto; background: #F1F1F1; padding: 8px; } .pdtp_options_line { position: relative; float: left; width: 100%; height: 34px; border-bottom: 2px solid #FFF; } .pdtp_options_line:not(:last-child) { margin-bottom: 6px; } .pdtp_options_line_image { float: left; width: 30px; height: 30px; mix-blend-mode: multiply; } #pdtp_options_big_image { display: none; position: absolute; z-index: 999; top: -8px; left: -208px; width: 200px; height: 200px; background: #FFF; border-top: 8px solid #F1F1F1; border-left: 8px solid #F1F1F1; border-bottom: 8px solid #F1F1F1; } .pdtp_options_line_name { display: block; float: left; height: 30px; font-size: 13px; padding: 6px 6px 0 12px; } .pdtp_options_line_price { display: block; float: right; height: 30px; font-size: 15px; color: #EF9D51; padding: 6px 54px 0 0; } .pdtp_options_add_btn { position: absolute; bottom: 0; right: 0; width: 38px; height: 30px; font-size: 14px; color: #61D0C4; text-align: center; padding: 6px 0; background: #FFF; cursor: pointer; } .option_out_of_stock { font-size: 22px; width: 22px; height: 22px; color: #CCC; margin-top: -1px; cursor: not-allowed; } .options_regular_basket button { position: relative; width: 38px; height: 30px; margin-top: -6px; background: none; border: none; } .options_regular_basket button .fa-shopping-basket { position: absolute; top: 4px; left: 6px; font-size: 20px; color: #404040; } .options_regular_basket button .fa-plus-square { position: absolute; top: -1px; left: 24px; font-size: 12px; } .pdtp_options_add_btn input[type="checkbox"] { display: none; } .pdtp_options_add_btn input[type="checkbox"] + label.checkbox_icon { color: #61D0C4; font-size: 22px; /*width: 22px;*/ /*height: 22px;*/ margin-top: 2px; cursor: pointer; } .pdtp_options_add_btn input[type="checkbox"]:checked + label.checkbox_icon { background: #FFF; } .pdtp_options_add_btn input[type="checkbox"] + label.checkbox_icon::before { content: "\f0c8"; display: block; font-family: "Font Awesome 5 Free"; } .pdtp_options_add_btn input[type="checkbox"]:checked + label.checkbox_icon::before { content: "\f14a"; display: block; font-family: "Font Awesome 5 Free"; } /* KIT PRET A REPARER */ .pdtp_pack { margin-bottom: 16px; } .pdtp_pack_products { overflow: auto; background: #F1F1F1; padding: 8px; } .pdtp_pack_line { overflow: auto; background: #F1F1F1; padding: 8px; } /* REPARATION EN ATELIER */ #pdtp_atelier { overflow: hidden; } #pdtp_cart_btn_rea_message { display: none; float: left; margin: 10px 0; color: #BB2222; } .pdtp_rea_icon { float: left; width: 100px; } .pdtp_rea_icon img { width: 100%; margin-top: 10px; } #pdtp_atelier .pdtp_rea_line { overflow: hidden; padding: 10px 10px 6px 10px; } #pdtp_atelier .pdtp_rea_text { float: left; width: 100%; font-size: 14px; color: #404040; text-align: justify; } #pdtp_atelier .pdtp_rea_text .price { font-weight: 600; } #pdtp_rea_en_savoir_plus { display: block; float: left; width: calc(100% - 124px); font-size: 15px; text-decoration: underline; padding: 10px 0; } #pdtp_atelier .pdtp_rea_button { float: right; width: 124px; height: 28px; background: linear-gradient(to top, #404040 50%, #EF9D51 50%); background-size: 100% 202%; background-position: left top; transition: all .3s ease-in-out; margin-top: 12px; border: none; font-size: 12px; color: #FFF; line-height: 2; border-radius: 0 0 10px 0; } #pdtp_atelier .pdtp_rea_button:hover { background-position: right bottom; cursor: pointer; } #pdtp_options_and_cart #pdtp_reassurances { display: flex; flex-direction: row; justify-content: space-around; margin-top: 30px; overflow: auto; text-align: center; } #pdtp_reassurances .reassurance { text-align: center; font-size: 24px; color: #404040; } #pdtp_reassurances .reassurance img { width: 60px; } #pdtp_reassurances .reassurance p { margin-top: 8px; line-height: 14px; } #pdtp_reassurances .reassurance i { width: 60px; height: 60px; font-size: 30px; color: #404040; background: #F1F1F1; border: 3px solid #EF9D51; padding-top: 11px; text-align: center; border-radius: 50%; } @media (max-width: 520px) { #pdtp_titles .pdtp_name { width: 100%; font-size: 20px; margin: 10px 0 6px 0; } #pdtp_titles .pdtp_description_short { width: 100%; } #pdtp_titles .pdtp_average { float: right; margin-top: -10px; margin-bottom: 12px; } #pdtp_titles .pdtp_ref_zone { position: absolute; bottom: -2px; right: 0; font-size: 9px; } #pdtp_images { margin-right: -8px; } #pdtp_images .product-images { display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; scroll-snap-points-x: repeat(70px); scroll-snap-type: mandatory; -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ } #pdtp_images .product-images::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } #pdtp_images .js-qv-mask ul { margin: 0 0 0 8px; } #pdtp_images .js-qv-mask ul li { flex-shrink: 0; } #pdtp_images .js-qv-mask.scroll { width: calc(100% - 24px) !important; margin-right: 0; } #pdtp_images .scroll-box-arrows .right { right: 0px; } .pdtp_social_sharing { position: absolute; z-index: 300; top: 6px; right: 6px; } #pdtp_infos { margin: 30px -16px 0 -16px; } .pdtp_bi_texts { border-bottom: 4px solid #626568; margin: 20px 0; } #pdtp_texts { margin-right: -24px; padding-right: 0; } #pdtp_texts .pdtp_pack_items .pil_image { width: 20%; } #pdtp_texts .pdtp_pack_items .pil_name { width: 74%; } #pdtp_options_and_cart { width: 100%; margin-top: 20px; } .cart_column { height: auto; } .pdtp_options_line_name { font-size: 12px; } #pdtp_atelier .pdtp_rea_text { font-size: 14px; } #bottom_fixed_cart { display: block; position: fixed; z-index: 3000; bottom: 0; right: 0; width: 100%; height: 50px; background: rgb(33 33 33 / 85%); } .bfc_price { display: block; float: right; width: 74px; height: 42px; font-size: 18px; color: #FFF; line-height: 43px; text-align: center; } .bfc_currency { font-size: 15px; } .bfc_cart_quantity { display: block; float: right; width: 44px; height: 40px; font-size: 18px; color: #FFF; text-align: center; margin: 5px; } .bfc_cart_quantity select { height: 40px; border: none; background: #FFF; padding-left: 4px; color: #404040; font-size: 16px; } .bfc_cart_btn { display: block; float: right; width: 160px; height: 40px; margin: 5px 5px 5px 0; border: none; font-size: 12px; color: #404040; line-height: 41px; font-weight: 600; background: #61D0C4; } .price_container_fixed_mobile { position: fixed; z-index: 300; bottom: 0; left: 0; width: 40%; height: 60px; background: #EF9D51; line-height: 62px; padding: 0 12px; } .price_container_fixed_mobile .price_total { font-size: 30px; color: #FFF; } .price_container_fixed_mobile .currency { font-size: 22px; color: #FFF; margin-left: -3px; } .price_container_fixed_mobile .price_old_container { position: absolute; bottom: 14px; right: 4px; font-size: 13px; color: #FFF; font-weight: 400; } .price_container_fixed_mobile .price_old_container .currency { color: #FFF; } .price_container_fixed_mobile .tax { display: none; } .add_to_cart_buttons_container_fixed_mobile { position: fixed; z-index: 300; bottom: 0; right: 0; width: 60%; height: 60px; background: #EF9D51; } .add_to_cart_buttons_container_fixed_mobile #add_to_cart_quantity, .add_to_cart_buttons_container_fixed_mobile #add_to_wishlist_button { display: none; } .add_to_cart_buttons_container_fixed_mobile .add_to_cart_btn { width: 100%; height: 48px; font-size: 1.3em; color: #FFF; font-weight: 600; margin: 6px; } .add_to_cart_buttons_container_fixed_mobile .add_to_cart_btn_icon { font-size: 16px; color: #FFF; vertical-align: 0px; margin-left: 4px; margin-right: 0; } /* .pdtp_price_stock_add_button .buttons_container { position: fixed; z-index: 300; bottom: 0; left: 0; height: 66px; background: rgba(45,45,45,0.75); border: none; } .pdtp_add_to_cart_quantity_to_buy { width: 30%; height: 40px; margin: 13px 0; } .pdtp_add_to_cart_quantity_to_buy .quantity_to_buy_button, .pdtp_add_to_cart_quantity_to_buy .quantity_to_buy_input { width: 36px; margin: 0; padding: 0 !important; } .pdtp_add_to_cart_quantity_to_buy .quantity_to_buy_button:focus { color: #61D0C4; } .pdtp_add_to_cart_quantity_to_buy .quantity_to_buy_input { color: #61D0C4; } .pdtp_add_to_cart_buy_button { width: calc(60% - 40px); height: 46px; font-size: 13px; margin: 10px 20px 10px 20px; background: #EF9D51; border-radius: 3px; } .pdtp_add_to_cart_wishlist { width: 10%; height: 30px; background: none; margin: 8px 0; padding: 0; } .pdtp_add_to_cart_wishlist .fa-list-alt { top: 19px; right: 17px; font-size: 18px; } .pdtp_add_to_cart_wishlist .fa-plus { top: 11px; left: 21px; font-size: 10px; } .pdtp_add_to_cart_buy_button .fa-shopping-basket, .pdtp_add_to_cart_buy_button .fa-frown-open { font-size: 15px; margin-left: 8px; } */ #pdtp_atelier .pdtp_rea_text { font-size: 13px; } #pdtp_atelier .pdtp_rea_button { font-size: 10px; } } /* NOTIFICATION COOKIES */ #cookieNotice { box-shadow: none !important; opacity: 1 !important; background: rgba(62,65,68,0.6) !important; font-family: 'Exo 2' !important; padding: 10px 0 10px 20px; } #cookieNotice p { color: #FFF !important; } #cookieNotice a { color: #FFF !important; text-decoration: underline; } /* FORMULAIRE D E CONTACT */ #contact select[name=id_contact], #contact input[name=from], #contact textarea[name=message], #contact input[name=ref_order] { background-color: #FFF; color: #626568; border: 1px solid #61D0C4; } /* TUNNEL DE COMMANDE / COMMANDES EN INVITE */ #checkout #search_widget { display: block; } #checkout #wrapper #content { margin: 30px 0 100px 0; } body#checkout .card-block { padding: 1.25rem 0; } body#checkout section.checkout-step { box-shadow: none; background-color: #F1F1F1; border: none; padding: 0; } body#checkout section.checkout-step:first-of-type { border-radius: 20px 20px 0 0; } body#checkout section.checkout-step:last-of-type { border-radius: 0 0 20px 20px; } body#checkout section.checkout-step .step-number { display: inline-block; width: 30px; height: 30px; background: #FFF; border-radius: 50%; color: #61D0C4; text-align: center; line-height: 12px; margin-right: 4px; } body#checkout section.checkout-step .step-title { text-transform: uppercase; cursor: pointer; padding: 0.4em 0.4em 0.2em 0.4em; margin-block-start: 4px; margin-block-end: 0; } body#checkout section.checkout-step .step-title .done { width: 30px; height: 30px; background: #FFF; border-radius: 50%; color: #61D0C4; text-align: center; line-height: 30px; margin: 0 4px 0 0; padding: 0; } body#checkout section.checkout-step .content { border-top: 4px solid #FFF; padding: 15px; } body#checkout section.checkout-step .m-y-2 { display: flex; gap: 2px; margin: 0 !important; } body#checkout section.checkout-step .nav-item { position: relative; z-index: 1; bottom: -6px; background: #FCFCFC; margin-left: 0; } body#checkout section.checkout-step .nav-item:last-of-type { right: 1px; } body#checkout section.checkout-step .nav-item .nav-link { display: block; height: 100%; font-weight: normal; } body#checkout section.checkout-step .nav-item:hover { bottom: 0; background: #FFF; } body#checkout section.checkout-step .nav-item.active { z-index: 2; bottom: 0; background: #FFF; box-shadow: 3px -3px 3px 0px #CCC; border: none; } body#checkout #checkout-personal-information-step .nav-item .nav-title { display: flex; align-content: flex-start; justify-content: flex-start; align-items: center; width: 90%; height: 36px; border-bottom: 2px solid #61D0C4; margin: 0 5%; font-size: 1.2em; color: #404040; } body#checkout #checkout-personal-information-step .nav-item .nav-title i { font-size: 24px; color: #EF9D51; margin: -2px 10px 0 0; } body#checkout #checkout-personal-information-step .nav-item .nav-subtitle { display: block; width: 90%; margin: 0 5%; font-size: 12px; color: #626568; padding: 8px 6px; } body#checkout #checkout-personal-information-step .nav-item .nav-subtitle ul li { display: flex; align-content: flex-start; justify-content: flex-start; align-items: center; margin: 6px 0; } body#checkout #checkout-personal-information-step .nav-item .nav-subtitle i { font-size: 18px; color: #EF9D51; margin-right: 10px; vertical-align: -2px; } body#checkout #checkout-personal-information-step #login-form, body#checkout #checkout-personal-information-step #customer-form, body#checkout #checkout-personal-information-step #guest-form { margin-top: 0; } body#checkout #checkout-personal-information-step .tab-content { position: relative; z-index: 1; top: -1px; background: #FFF; padding: 1.5rem; box-shadow: 3px -3px 3px 0px #CCC; } body#checkout #checkout-guest-form .form-group:nth-child(-n+2) { display: none; } body#checkout section.checkout-step .address-item { background: #FFF; } body#checkout section.checkout-step .delivery-options-list { padding: 15px; } body#checkout #checkout-addresses-step .js-address-form { padding: 15px; } @media (max-width: 1024px) { body#checkout #checkout-personal-information-step .nav-item .nav-title { font-size: 0.85em; } } @media (max-width: 480px) { body#checkout #checkout-personal-information-step .nav-item .nav-title { height: 60px; } body#checkout #checkout-personal-information-step .nav-item .nav-title i { font-size: 18px; } body#checkout #checkout-personal-information-step .nav-item .nav-subtitle i { display: none; } } /* CHOIX ECRANS IPHONE */ .cms-id-163 #content-wrapper { padding: 0; } #iphone_screens { width: calc(100% + 20px); min-height: 600px; padding: 0; } #iphone_screens .instructions { padding: 0 0 15px 0; } #iphone_screens h2 { color: #61D0C4; text-align: left; margin-bottom: 15px; } #iphone_screens .instructions li { font-size: 14px; color: #626568; margin: 24px 0; } #iphone_screens .instructions i { display: block; float: left; font-size: 24px; color: #404040; margin: -3px 10px; } #iphone_screens .instructions .fa-thumbs-up { font-size: 14px; } #iphone_screens .hidden, #iphone_screens .model, #iphone_screens .goodchoice { display: none; } #iphone_screens .visible { display: block; } #iphone_screens .choices { padding: 10px; background: #404040; border-radius: 12px; } #iphone_screens .choices h2 { font-size: 16px; } #iphone_screens .choices #models { z-index: 1; width: 100%; height: 64px; } #iphone_screens .choices #models li.placeholder { display: flex; font-size: 16px; border: 1px solid #F1F1F1; } #iphone_screens .choices #models li.placeholder i { position: absolute; top: 22px; right: 10px; font-size: 20px; color: #61D0C4; } #iphone_screens .choices #models li { position: relative; z-index: 2; width: 100%; height: 64px; background-color: #FFF; align-items: center; font-size: 16px; padding: 0 0 0 10px; border-left: 1px solid #F1F1F1; border-right: 1px solid #F1F1F1; border-bottom: 3px solid #F1F1F1; color: #626568; } #iphone_screens .choices #models li::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-repeat: no-repeat; background-size: cover; background-position-x: 120px; opacity: 0.7; } #iphone_screens .choices #models li:hover, #iphone_screens .choices #models li:hover::after { cursor: pointer; opacity: 1; } #iphone_screens .choices #models li:not(.placeholder) { display: none; } #iphone_screens .choices #models li.visible { display: flex; } #iphone_screens .choices #models li.placeholder { cursor: pointer; } #iphone_screens .choices #models li#iphone13PROMAX::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/292.png); } #iphone_screens .choices #models li#iphone13PRO::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/291.png); } #iphone_screens .choices #models li#iphone13MINI::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/289.png); } #iphone_screens .choices #models li#iphone13::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/290.png); } #iphone_screens .choices #models li#iphone12PROMAX::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/243.png); } #iphone_screens .choices #models li#iphone12PRO::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/242.png); } #iphone_screens .choices #models li#iphone12MINI::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/240.png); } #iphone_screens .choices #models li#iphone12::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/241.png); } #iphone_screens .choices #models li#iphoneSE2020::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/224.png); } #iphone_screens .choices #models li#iphone11PROMAX::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/178.png); } #iphone_screens .choices #models li#iphone11PRO::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/179.png); } #iphone_screens .choices #models li#iphone11::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/177.png); } #iphone_screens .choices #models li#iphoneXR::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/132.png); } #iphone_screens .choices #models li#iphoneXSMAX::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/130.png); } #iphone_screens .choices #models li#iphoneXS::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/127.png); } #iphone_screens .choices #models li#iphoneX::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/1.png); } #iphone_screens .choices #models li#iphone8PLUS::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/2.png); } #iphone_screens .choices #models li#iphone8::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/3.png); } #iphone_screens .choices #models li#iphone7PLUS::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/4.png); } #iphone_screens .choices #models li#iphone7::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/5.png); } #iphone_screens .choices #models li#iphone6SPLUS::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/6.png); } #iphone_screens .choices #models li#iphone6S::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/7.png); } #iphone_screens .choices #models li#iphone6PLUS::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/8.png); } #iphone_screens .choices #models li#iphone6::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/9.png); } #iphone_screens .choices #models li#iphoneSE::after { background-image: url(https://dev-1.brico-phone.com/tutos/img/modeles/10.png); } #iphone_screens .choices .choice_container { position: relative; display: none; justify-content: flex-start; align-items: center; z-index: 1; width: 100%; height: 40px; border: 1px solid #F1F1F1; margin: 8px 0 0 0; cursor: pointer; text-align: left; font-size: 14px; padding-left: 40px; background: #FFF; } #iphone_screens .choices .choice_container:last-of-type { border-radius: 0 0 8px 8px; } #iphone_screens .choices .choice_container input { position: absolute; opacity: 0; height: 0; width: 0; } #iphone_screens .choices .choice_container .checkmark { position: absolute; top: 7px; left: 7px; height: 25px; width: 25px; background-color: #EEE; } #iphone_screens .choices .choice_container:hover .checkmark { background-color: #CCC; } #iphone_screens .choices .choice_container input:checked ~ .checkmark { background-color: #61D0C4; } #iphone_screens .choices .choice_container .checkmark::after { content: ""; position: absolute; display: none; } #iphone_screens .choices .choice_container input:checked ~ .checkmark::after { display: block; } #iphone_screens .choices .choice_container .checkmark::after { left: 9px; top: 4px; width: 8px; height: 13px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #iphone_screens .results { padding: 0 0 0 15px; } #iphone_screens .results .types_of_screens { display: none; width: calc(100% - 20px); font-size: 14px; padding: 10px; background: #F1F1F1; margin-bottom: 10px; } #iphone_screens .results .pic_product_container_1 { width: 33%; } #iphone_screens .results .pic_product_container_1 .pic_pdt_name { min-height: 56px; } #iphone_screens .results .pic_product_container_1 .pic_pdt_description_short { min-height: 70px; text-align: left; } @media (max-width: 480px) { #iphone_screens { width: 100%; } #iphone_screens .results { margin-top: 15px; padding: 0; } #iphone_screens .results .pic_product_container_1 { width: 50%; } } .cart_atelier { height: 120px; background: url(../img/rep_atelier.jpg); background-repeat: no-repeat; background-size: 34%; background-position: 731px -35px; border: 1px solid #F1F1F1; border-radius: 18px; padding: 15px; margin: 10px 0; } .cart_atelier .message { float: left; width: 100%; font-size: 16px; font-weight: 600; line-height: 1.2; padding: 4px 0 8px 0; } .cart_atelier .message .available1 { color: #61D0C4; } .cart_atelier .message .available2 { color: #EF9D51; } .cart_atelier .message .unavailable { color: #BB2222; } .cart_atelier .button_title { float: left; width: 50%; font-size: 15px; color: #404040; font-weight: 600; padding: 16px 0; } .cart_atelier .button { float: left; width: 50%; padding-top: 4px; } .cart_atelier #add_atelier_btn { position: relative; width: 68px; height: 34px; background: #404040; border: none; border-radius: 17px; } .cart_atelier #add_atelier_btn:focus { outline: none; } .cart_atelier #add_atelier_btn .switch { position: absolute; display: block; width: 26px; height: 26px; top: 4px; left: 4px; background: #ADAAAA; border-radius: 50%; transition: .5s ease; } .cart_atelier #add_atelier_btn:not(.disabled):hover .switch, .cart_atelier #add_atelier_btn .switch.active { left: 38px; background: #61D0C4; transition: .5s ease; } .cart_atelier #add_atelier_btn.disabled { background: #F1F1F1; cursor: not-allowed; } .cart_atelier #add_atelier_btn.disabled .switch { background: #FFF; } .cart_atelier .cgv { font-size: 12px; } @media (max-width: 480px) { .cart_atelier .button { text-align: right; } } .cart_atelier_texts { background: #F1F1F1; border-radius: 0 0 18px 18px; } .cart_atelier_conditions, .cart_atelier_prices { padding: 10px 0; font-size: 13px; color: #626568; } .cart_atelier_conditions .title, .cart_atelier_prices .title { display: block; width: 100%; padding: 4px; background: #FFF; color: #EF9D51; margin-bottom: 6px; } .cart_atelier_conditions .title, .cart_atelier_prices .title:first-of-type { border-right: 8px solid #F1F1F1; } .cart_atelier_conditions .fa-check { color: #EF9D51; } .cart_2020_cell { border-bottom: none; } .product_sup_row { height: 128px; margin: 10px 0 10px 0; border: 1px solid #F1F1F1; border-radius: 18px; } .product_sup_img { padding: 20px 0; } .product_sup_img img { width: 100%; } .product_sup_text { font-size: 0.875rem; color: #EF9D51; line-height: 20px; padding: 28px 0 0 20px; } .product_sup_shield { display: block; float: left; font-size: 33px; vertical-align: -10px; margin-right: 10px; } .product_sup_cart { padding: 36px 0 0 0; } .product_sup_cart button { height: 42px; } .product_sup_addtocart_icon { vertical-align: -7px; margin-right: 4px; } .product_sup_plus { text-align: center; font-size: 14px; line-height: 44px; padding-top: 36px; } @media (max-width: 375px) { .product_sup_row { height: 98px; margin-top: 10px; } .product_sup_text { font-size: 12px; line-height: 16px; margin-bottom: 10px; } .product_sup_plus a { text-decoration: underline; } } @media (min-width: 768px) and (max-width: 1024px) { .product_sup_row { height: 93px; } .product_sup_cart { margin-top: 6px; } .product_sup_text { margin-top: 4px; } .product_sup_plus { text-align: right; } } #authentication .login-form .form-control { background-color: #FFF; border: 1px solid #626568; border-radius: 6px; } #authentication .login-form .btn-primary { background-color: #4C958B; } #authentication .no-account .btn-primary { background-color: #404040; color: #FFF; } #authentication hr { border-top: 1px solid #EF9D51; } #authentication .no-account { margin-top: 10px; } #authentication #amazonLoginFormButton { color: #404040; padding-bottom: 20px; border-bottom: 1px solid #EF9D51; } #authentication .amzbuttoncontainer { text-align: left; } #authentication .amzbuttoncontainer h3 { color: #EF9D51; } #authentication .amazonpay-button-inner-image { background: #FFF !important; } /* @media (min-width: 481px) { .ets_mm_megamenu .mm_tabs_li:not(.open) .mm_tab_has_child::after { border: none !important; } .ets_mm_megamenu .mm_columns_contents_ul { width: calc(100% - 232px + 2px) !important; padding-left: 190px; overflow: hidden; } .ets_mm_megamenu .ets_svg_icon { position: absolute; } .ets_mm_megamenu .mm_tab_name #svg_1 { top: 9px; left: 12px; width: 22px; } .ets_mm_megamenu .mm_tab_name #svg_2 { top: 12px; left: 14px; width: 20px; } .ets_mm_megamenu .mm_tab_name #svg_3 { top: 10px; left: 10px; width: 30px; } .ets_mm_megamenu .mm_tab_name #svg_4 { top: 17px; left: 7px; width: 32px; } .ets_mm_megamenu .mm_tab_name #svg_5 { top: 11px; left: 13px; width: 22px; } .ets_mm_megamenu .mm_tab_name #svg_6 { top: 9px; left: 13px; width: 24px; } .ets_mm_megamenu .mm_tab_name #svg_7 { top: 18px; left: 7px; width: 34px; } .ets_mm_megamenu .mm_tab_name #svg_8 { top: 10px; left: 10px; width: 30px; } .ets_mm_megamenu .mm_tab_name #svg_9 { top: 8px; left: 14px; width: 24px; } .ets_mm_megamenu .mm_tab_name #svg_13 { top: 8px; left: 15px; width: 22px; } .ets_mm_megamenu .mm_tab_name #svg_14 { top: 11px; left: 15px; width: 19px; } .ets_mm_megamenu .mm_tab_name #svg_15 { top: 10px; left: 16px; width: 20px; } .ets_mm_megamenu .mm_tab_name #svg_16 { top: 7px; left: 11px; width: 28px; } .ets_mm_megamenu .mm_tab_name #svg_17 { top: 7px; left: 10px; width: 28px; } .ets_mm_megamenu .mm_tab_name #svg_19 { top: 11px; left: 13px; width: 22px; } .ets_mm_megamenu .mm_tab_name #svg_21 { top: 6px; left: 12px; width: 26px; } .ets_mm_megamenu .level_4_titles { position: absolute; top: 0; left: 0; width: 190px; height: 100%; } .ets_mm_megamenu .level_4_titles .level_4_title { position: relative; height: 43px; border-bottom: 1px solid #F1F1F1; border-right: 1px solid #F1F1F1; text-align: left; font-weight: 600; padding: 10px 0; margin-left: 30px; } .ets_mm_megamenu .mm_tabs_li.open .mm_tab_toggle_title { padding-left: 60px; } .ets_mm_megamenu .level_4_titles .level_4_title:hover { padding-left: 10px; transition: .3s ease; } .ets_mm_megamenu .level_4_titles .level_4_title:nth-of-type(1) { border-right: none; } .ets_mm_megamenu .level_4_titles .level_4_title.selected { border-right: none !important; padding-left: 10px; } .ets_mm_megamenu .level_4_titles .level_4_title:hover::after, .ets_mm_megamenu .level_4_titles .level_4_title.selected::after { border-right: 1px solid #999; border-top: 1px solid #999; content: ""; height: 6px; margin-top: -3px; position: absolute; right: 15px; top: 50%; transform: rotate(45deg); -webkit-transform: rotate(45deg); transition: all 0.35s; -webkit-transition: all 0.35s; width: 6px; } .ets_mm_megamenu .ets_mm_block .menu_h4_text a { font-size: 17px; } .ets_mm_megamenu .mm_columns_contents_ul .level_4_content { display: none; } .ets_mm_megamenu .mm_columns_contents_ul .level_4_content.level_4_model_1 { display: block; } .ets_mm_megamenu .ets_mm_block_content { display: flex; text-align: left; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; } .ets_mm_megamenu .level_4_content { padding: 5px 20px; } .ets_mm_megamenu .level_4_content_column { float: left; min-width: 180px; height: 100%; padding-right: 30px; } .ets_mm_megamenu .level_4_content_column h5 { margin-top: 8px; font-size: 11px; } .ets_mm_megamenu .level_4_content_column a { display: block; } .ets_mm_megamenu .active_menu_13 .level_4_titles { top: 50px; } .ets_mm_megamenu .identify_your_macbook { display: none; } .ets_mm_megamenu .active_menu_13 .identify_your_macbook { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50px; border-bottom: 1px solid #F1F1F1; text-align: left; font-size: 16px; color: #61D0C4; text-decoration: underline; line-height: 50px; padding-left: 15px; } .ets_mm_megamenu .mm_columns_contents_ul.active_menu_13 { padding-top: 65px; } .ets_mm_megamenu .active_menu_13 .level_4_content_column { min-width: 230px; } } @media (max-width: 768px) { .ets_mm_megamenu .mm_columns_contents_ul { background-image: none !important; } .ets_mm_megamenu .ets_mm_block_content { flex-direction: row; flex-wrap: wrap; } .ets_mm_megamenu .level_4_content_column { flex: 50%; margin-bottom: 20px; } .ets_mm_megamenu .identify_your_macbook { display: none; } .ets_mm_megamenu .active_menu_13 .identify_your_macbook { display: block; } } @media (max-width: 480px) { .menu .layout_layout1 .ets_mm_megamenu_content_content .mm_menus_ul { left: -1px !important; top: calc(100% + 1px); border-left: 1px solid #F1F1F1; border-right: 1px solid #F1F1F1; } .ets_mm_megamenu .ets_mm_block_content { display: none; } .ets_mm_megamenu .mm_tabs_li .mm_columns_contents_ul { height: auto; padding: 5px 15px; } .ets_mm_megamenu .mm_tab_toggle_title { padding: 9px 15px 9px 15px; } .ets_mm_megamenu .ets_mm_block .menu_h4_text a { font-size: 15px; } .ets_mm_megamenu .level_4_content { padding-top: 12px; } .ets_mm_megamenu .level_4_content:not(:last-of-type) { border-bottom: 1px solid #F1F1F1; } .ets_mm_megamenu .level_4_content_column { padding: 6px 0; } .ets_mm_megamenu .identify_your_macbook { display: none; } .ets_mm_megamenu .active_menu_13 .identify_your_macbook { display: block; } .ets_mm_megamenu .menu_title_link { pointer-events: none; } } */ /* BFM Brico-phone Front Messages */ .bfm_messages .bfm_message_desktop { width: 100%; padding: 0 calc((100% - 1110px) / 2); } .bfm_messages .bfm_message_desktop.bfm_fullwidth { padding: 0; } #contact #content-wrapper, #contact .card-block { padding: 0; } .product_added_to_cart.active { background: #404040; color: #EF9D51; transition: .5s ease; } .product_added_to_cart.active .picto { color: #FFF; animation: shake 1s; } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } .modal-backdrop.in { display: none; } .cartmodal2022 { position: absolute; width: calc(((1110px / 12) * 4) - 1px); right: -2000px; top: 80px; height: 50px; background: #404040; opacity: 0; transition: all 1200ms cubic-bezier(.47,1.64,.41,.8); } .cartmodal2022.active { right: 0; opacity: 1; transition: all 400ms cubic-bezier(.47,1.64,.41,.8); } .cartmodal2022 h4 { display: block; height: 50px; font-size: 16px; color: #EF9D51; font-weight: 400; margin-block-start: 0; margin-block-end: 0; line-height: 50px; } .cartmodal2022 h4 i { font-size: 28px; color: #FFF; vertical-align: -3px; } @media (max-width: 480px) { .cartmodal2022 { width: 100vw; top: 50px; } } .cartmodal2023 { position: relative; margin: 2px; background: #FFF; cursor: default; border-radius: 0 0 8px 8px; transition: all 1200ms cubic-bezier(.47,1.64,.41,.8); } /* @media (max-width: 480px) { .cartmodal2023 { width: 100vw; top: -100px; right: 0; } .cartmodal2023.active { top: 49px; } */ .cartmodal2023.active { right: 0; opacity: 1; transition: all 400ms cubic-bezier(.47,1.64,.41,.8); } .cartmodal2023 .product_added { display: flex; flex-direction: row; align-items: center; width: 100%; height: 60px; margin: 0; margin-block-start: 0; margin-block-end: 0; border: 1px solid #F1F1F1 } .cartmodal2023 .product_added .icon { float: left; width: 60px; height: 60px; } .cartmodal2023 .product_added .icon i { width: 34px; height: 34px; font-size: 22px; color: #61D0C4; line-height: 22px; border: 3px solid #61D0C4; border-radius: 8px; padding: 3px; margin: 12px; } .cartmodal2023 .product_added .product_name { float: left; width: 60%; font-size: 12px; text-align: left; color: #404040; line-height: 14px; padding: 0 10px; } .cartmodal2023 .product_added .product_price { float: left; width: calc(40% - 60px); font-size: 18px; color: #61D0C4; font-weight: 600; } .cartmodal2023 .buttons { display:flex; height: 50px; } .cartmodal2023 .buttons a { height: 50px; line-height: 50px; background: #404040; text-transform: uppercase; } .cartmodal2023 .buttons a:hover { background: #303030; } .cartmodal2023 .buttons .continue_shopping { flex-basis: 60%; color: #61D0C4 !important; border-right: 3px solid #FFF; } .cartmodal2023 .buttons .go_to_cart { flex-basis: 40%; color: #EF9D51 !important; font-weight: 600; } .cartmodal2023 .options { padding: 10px 4px 4px 4px; } .cartmodal2023 .options h2 { font-size: 14px; color: #404040; text-align: center; text-transform: uppercase; } .cartmodal2023 .options_products { display: flex; flex-wrap: wrap; gap: 10px; } .cartmodal2023 .options_products article { position: relative; flex-basis: calc(50% - 5px); border: 1px solid #61D0C4; border-radius: 6px; padding: 10px; } .cartmodal2023 .options_products article h3 { min-height: 45px; font-size: 13px; color: #404040; text-align: center; } .cartmodal2023 .options_products article img { display: block; width: 50%; margin: -10px auto 10px auto; } .cartmodal2023 .options_products article .prices { float: left; width: calc(100% - 60px); } .cartmodal2023 .options_products article .price { font-size: 20px; color: #EF9D51; font-weight: 600; margin: 0; } .cartmodal2023 .options_products article .price_old { font-size: 12px; color: #999; line-height: 13px; margin: 0; } .cartmodal2023 .options_products article .add_option_to_cart_btn { float: right; width: 45px; height: 45px; background: #EF9D51; border: none; padding: 12px 4px; border-radius: 12px; } .cartmodal2023 .options_products article .add_option_to_cart_btn:focus { outline: none; } .cartmodal2023 .options_products article .add_option_to_cart_btn i { color: #FFF; font-size: 22px; margin: 0 0 0 -4px; } .cartmodal2023 .options_products article .add_option_to_cart_btn:hover { background: #404040; cursor: pointer; } .cartmodal2023 .options_products article .option_added { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background: #61D0C4E0; font-size: 50px; color: #FFF; text-align: center; padding-top: calc(68% - 50px); } #cartmodal2023_mask { position: fixed; top: 120px; left: 0; z-index: 9998; width: 100vw; height: 100vh; background: rgba(20,20,20,0.5); cursor: default; } /* PAYPAL CHECKOUT */ /* #cart .payment-method-logo-block, #cart .ps-checkout-express-separator { display: none; } #cart #ps-checkout-express-button { width: 48%; } #checkout #payment-option-3-container .payment_text, #checkout #payment-option-4-container .payment_text { width: 80%; } #checkout #payment-option-3-container .payment_logos, #checkout #payment-option-4-container .payment_logos { display: none; } #checkout #payment-option-3-container .ps_checkout-mark, #checkout #payment-option-4-container .ps_checkout-mark { margin-left: 20px; } #checkout #conditions-to-approve { z-index: 1; } #checkout .accept-cgv { float: left; border: none; background: none; color: #404040; padding: 0; } #checkout #conditions-to-approve .custom-checkbox { margin-top: -4px; } #checkout #payment-confirmation button[type=submit] { min-width: 51%; } */ /* PRODUCTS OFFER IN CART */ #cart .alert-danger { margin-top: 10px; margin-bottom: 0; background: #f6cea9; color: #BB2222; border: none; } #cart .checkout .btn-primary { padding: 13.5px 0; } @media (min-width: 480px) { #cart .cart-grid-body .card-block { padding: 0 0 4px 10px; } #acc_poic_mobile_button, #cart .top_cart_purchase_btn { display: none; } } #cart .poic_reassurance_totals { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 256px auto; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "poic_container totals_container" "reassurance_container totals_container"; margin-top: 20px; } .poic_container { grid-area: poic_container; position: relative; padding-right: 20px; } .totals_container { grid-area: totals_container; } #cart .poic_title { width: 100%; text-align: center; margin: -10px 0 25px 0; } #cart .poic_title::after { content: ''; display: block; position: absolute; left: 0; width: calc(100% - 20px); height: 30px; background: #333; margin-top: -3px; } #cart .poic_title h2 { position: relative; z-index: 2; width: 60%; margin: 0 auto -30px auto; text-transform: uppercase; font-size: 16px; color: #FFF; background: #F2750A; padding: 11px 0 9px 0; border-radius: 10px; transform: rotate(358deg); border: 3px solid #FFF; } #cart #acc_poic_products { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; float: left; width: 100%; margin-top: 20px; } #cart .poic_product { position: relative; overflow: hidden; flex-basis: calc((100% - 10px) / 2); min-height: 116px; background: #FFF; padding: 15px 0 0 15px; border: 1px solid #626568; background-size: contain; background-repeat: no-repeat; background-position-x: right; } #cart .poic_product .name { position: relative; display: block; float: left; width: 100%; z-index: 2; font-size: 15px; color: #404040; text-decoration: underline; margin-bottom: 6px; } #cart .poic_product .desc { position: relative; display: block; z-index: 2; float: left; width: 100%; font-size: 15px; color: #404040; } #cart .poic_product .prices { position: relative; display: block; z-index: 2; float: left; width: 42%; z-index: 2; margin-top: 8px; } #cart .poic_product .price { display: block; font-size: 26px; color: #61D0C4; font-weight: 600; } #cart .poic_product .price_old { position: relative; display: block; font-size: 13px; color: #404040; margin: 4px 0 0 0; } #cart .poic_product form { position: relative; display: block; z-index: 2; float: left; } #cart .poic_product button { border: none; border-radius: 10px; padding: 10px 10px 10px 4px; background: #61D0C4; } #cart .poic_product button:hover { background: #00AC9F; } #cart .poic_product button .label { display: inline-block; text-align: left; font-size: 18px; color: #404040; } #cart .poic_product button .fal { display: inline-block; font-size: 18px; color: #FFF; margin-left: 6px; } #cart .poic_product .image { position: absolute; z-index: 1; bottom: -11px; right: -17px; width: 172px; } @media (max-width: 480px) { #cart .card-block { padding: 0; } #cart .card-block h1 { margin: 8px 0 6px 0; } #cart .poic_reassurance_totals { display: grid; grid-template-columns: 100%; grid-template-rows: 1fr 0.3fr; gap: 0px 0px; grid-template-areas: "totals_container" "reassurance_container"; margin-top: 20px; } #cart #acc_poic_mobile_button { display: none; background: #F2750A; font-size: 15px; color: #FFF; font-weight: 600; padding: 10px 8px 8px 6px; border-radius: 3px; margin-top: 30px; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } #cart #acc_poic_mobile_button .plus_infos { float: right; text-decoration: underline; } #cart .top_cart_purchase_btn { display: block; background: #61D0C4; text-align: center; font-size: 16px; color: #FFF; font-weight: 600; padding: 10px 8px 8px 6px; border-radius: 3px; margin-top: 8px; transition: .8s ease; } #cart .top_cart_purchase_btn.fixed { position: fixed; z-index: 997; top: 56px; left: 0; width: 100%; border-radius: 0; margin: 0; transition: .8s ease; } #cart .poic_title h2 { width: 80%; font-size: 14px; } #cart .poic_container { order: 3; padding-right: 0; margin-bottom: 15px; } #cart .poic_title::after { width: 100%; } #cart .poic_product { min-height: 230px; background-position-x: center; background-position-y: 80px; } #cart .poic_product .name { font-size: 15px; } #cart .poic_product .desc { font-size: 13px; } #cart .poic_product .prices { width: 60%; } #cart .poic_product .price { font-size: 24px; } #cart .poic_product .price_old { font-size: 14px; } #cart .poic_product .price_old::after { left: -7px; width: 52px; height: 1px; } #cart .poic_product .image { top: auto; bottom: -36px; right: 0; width: 100%; } #cart .poic_product button { width: 100%; margin-top: 10px; } #cart .poic_product button .label { font-size: 12px; } #cart .poic_product button .fal { vertical-align: -2px; } #cart .cart-detailed-totals { min-height: auto; } #cart .cart-summary-line { line-height: 1.3; } #cart .cart-summary-line .label { font-size: 15px; padding-left: 6px; } #cart .cart-summary-line .value { font-size: 16px; line-height: 1.7; padding-right: 6px; } } /* HEADER 2023 */ body { padding-top: 0; } body.fixed { padding-top: 142px; } @media (max-width: 768px) { body.fixed { padding-top: 87px; } } .header2023_container { position: relative; z-index: 999; } .header2023_container.fixed { position: fixed; top: -30px; left: 0; width: 100%; z-index: 99999; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } /* .header2023_container.fixed .header2023_bottom { display: none; } .header2023_container.fixed::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 6px; background: linear-gradient(180deg, rgba(171,171,171,1) 0%, rgba(255,255,255,0) 100%); } */ .header2023_container.fixed .mm_menus_ul { top: 56px; } .header2023_top { height: 30px; background: #404040; } .header2023_top .buttons { width: 1110px; margin: 0 auto; } .header2023_top .buttons .button_left { float: left; } .header2023_top .buttons .button_right { float: right; } .header2023_top .buttons .button { display: inline-block; font-size: 14px; color: #F1F1F1 !important; line-height: 31px; transition: .3s ease; } .header2023_top .buttons .button:hover { color: #EF9D51 !important; transition: .3s ease; } .header2023_top .buttons .header_phone { position: relative; margin: 0 20px 0 0; } .header2023_top .buttons .header_phone .full_hours_bubble { position: absolute; display: none; z-index: 999; top: 30px; left: 0; width: 108%; font-size: 14px; color: #404040; line-height: 19px; background: #FFF; padding: 4px 7px; border-radius: 0 0 6px 6px; } @media (min-width: 768px) { .header2023_top .buttons .header_phone:hover .full_hours_bubble { display: block; } } .header2023_top .buttons .header_phone svg { width: 24px; margin: 0 3px 0 -3px; vertical-align: -7px; } .header2023_top .buttons .header_tchat svg { width: 20px; margin: 0 3px 0 -3px; vertical-align: -5px; } .header2023_top .buttons .header_contact { margin: 0 0 0 10px; } .header2023_top .buttons .header_contact svg { width: 16px; vertical-align: -3px; } .header2023_top .buttons .header_faq { margin: 0 0 0 10px; } .header2023_top .buttons .header_faq svg { width: 16px; vertical-align: -3px; } .header2023_top .buttons .header_blog { margin: 0 0 0 10px; } .header2023_top .buttons .header_blog svg { width: 17px; vertical-align: -4px; } .header2023_top .buttons .header_diag svg { width: 14px; vertical-align: -3px; } .header2023_top .buttons .button span { font-size: 11px; font-style: italic; } .header2023_top .buttons .button .fa-user-headset, .header2023_top .buttons .button .fa-comments-alt, .header2023_top .buttons .button .fa-paper-plane { font-size: 16px; vertical-align: -1px; margin-right: 5px; } .header2023_top a:hover .header_icon g { fill: #EF9D51; transition: .3s ease; } .header2023_center { height: 70px; background: #F1F1F1; padding: 0 calc((100% - 1110px) / 2); } /* .header2023_center.fixed { position: fixed; width: 100%; top: 0; } .header2023_center.fixed::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 6px; background: linear-gradient(180deg, rgba(171,171,171,1) 0%, rgba(255,255,255,0) 100%); } */ .header2023_center_content { display: flex; width: 1110px; margin: 0 auto; height: 70px; } .header2023_center_content .header2023_logo { display: flex; width: 200px; background: none; align-items: center; } .header2023_center_content .header2023_logo img { width: 180px; margin: -2px 0 0 -6px; } .header2023_center_content .header2023_logo .slogan { font-size: 14.7px; color: #61D0C4; } .header2023_center_content .header2023_search { display: flex; width: calc(1110px - (2 * 200px)); } .header2023_center_content .header2023_search .main_search { display: flex; justify-content: flex-start; align-items: center; width: 60%; } .header2023_center_content .header2023_search .main_search_input_container { position: relative; width: 100%; height: 36px; } .header2023_center_content .header2023_search .main_search_input_container #main_search_query { width: 100%; height: 100%; border: none; color: #626568; line-height: 36px; background: #fff; border-radius: 20px; padding-left: 16px; cursor: text; } .header2023_center_content .header2023_search .main_search_input_container input:focus { outline: none; } .header2023_center_content .header2023_search .main_search_input_container .search_icon { position: absolute; top: 4px; right: 8px; width: 26px; } .header2023_center_content .header2023_search .imei_search { display: flex; justify-content: center; align-items: center; width: 40%; } .header2023_center_content .header2023_search .imei_search_input_container { position: relative; width: 80%; height: 36px; border-radius: 20px; background: #fff; overflow: hidden; } .header2023_center_content .header2023_search .imei_search_input_container input { display: inline-block; float: left; width: 100%; height: 100%; border: none; padding-left: 16px; } .header2023_center_content .header2023_search .imei_search_input_container input:focus { outline: none; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label { position: absolute; top: 0; right: 0; width: 70px; height: 100%; line-height: 36px; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .imei_icon { position: absolute; top: 4px; right: -40px; height: 28px; transition: .3s ease; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .imei_icon.visible { right: 10px; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .imei_counter { position: absolute; top: 0; right: -40px; height: 36px; font-size: 14px; line-height: 36px; transition: .3s ease; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .imei_counter.visible { right: 10px; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .imei_counter.pending { color: #ef9d51; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .imei_counter.valid { color: #22aa22; font-weight: 600; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .forbidden_character { position: absolute; top: 5px; right: -40px; height: 36px; font-size: 26px; color: #bb2222; transition: .3s ease; } .header2023_center_content .header2023_search .imei_search_input_container .imei_label .forbidden_character.visible { right: 10px; } /* .header2023_center_content .header2023_search .input_container { position: relative; width: 80%; height: 38px; margin: 14px auto; border-radius: 20px; background: #fff; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; overflow: hidden; transition: .3s ease; } .header2023_center_content .header2023_search .input_container:hover { width: calc(80% + 4px); height: 42px margin: 10px auto; border-radius: 26px; transition: .3s ease; } .header2023_center_content .header2023_search input[name=s] { position: relative; width: 100%; height: 100%; border: none; border-radius: 20px; padding-left: 25px; } .header2023_center_content .header2023_search input[name=s]:focus { outline: none; } .header2023_center_content .header2023_search .input_container .search_icon { position: absolute; top: 4px; right: 8px; width: 26px; } */ .header2023_center_content .header2023_search .input_container .search_imei_tag { position: absolute; top: 0; left: -260px; width: 200px; height: 100%; background: #EF9D51; font-size: 15px; color: #FFF; padding: 11px 0 11px 20px; transition: .6s ease; } .header2023_center_content .header2023_search .input_container .imei_counter { position: absolute; display: none; top: 0; right: 30px; font-size: 15px; color: #EF9D51; padding: 11px; } .header2023_center_content .header2023_mobile_search_button { display: none; } .header2023_center_content .header2023_account_cart { width: 200px; } .header2023_center_content .header2023_account_cart .account { position: relative; display: flex; align-items: center; justify-content: flex-end; float: left; width: 130px; height: 100%; font-size: 11px; color: #404040 !important; text-transform: uppercase; background: none; cursor: pointer; transition: .3s ease; } .header2023_center_content .header2023_account_cart .account::after { content: ''; position: absolute; top: 20%; right: 0; width: 1px; height: 60%; border-right: 1px solid #404040; } .header2023_center .account_slider_frame { position: absolute; z-index: 1000; display: flex; align-items: center; justify-content: flex-end; top: 0; right: 0; width: 204px; height: 100%; overflow: hidden; } .header2023_center .account_slider { position: absolute; top: 12px; right: -214px; width: 196px; max-height: 46px; background: #404040; border-radius: 24px; transition: all .5s cubic-bezier(.47,1.64,.41,.8); } .header2023_center .account_slider.opened { right: 6px; transition: all .5s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .header2023_account_cart .account:hover .account_icon g { fill: #626568; } .header2023_center_content .header2023_account_cart .account .account_icon { z-index: 1000; width: 28px; fill: #404040; margin: 0 14px 0 10px; transition: .3s ease; } .header2023_center_content .header2023_account_cart .account .account_icon.opened g { fill: #F1F1F1; } .header2023_center .account_slider .logout_btn { display: inline-block; float: left; width: 46px; height: 46px; font-size: 13px; color: #FFF !important; padding: 7px 0 0 10px; border-right: 2px solid #FFF; transition: .3s ease; } .header2023_center .account_slider .logout_btn .logout_icon { width: 22px; fill: #FFF; } .header2023_center .account_slider .logout_btn:hover .logout_icon { fill: #EF9D51; } .header2023_center .account_slider .myaccount_btn { display: inline-block; float: left; width: calc(100% - 86px); height: 46px; font-size: 13px; color: #FFF !important; line-height: 15px; padding: 9px 0 0 12px; transition: .3s ease; } .header2023_center .account_slider a:hover { color: #EF9D51 !important; transition: .3s ease; } .header2023_center_content .header2023_account_cart .cart { position: relative; display: flex; align-items: center; justify-content: flex-end; float: left; width: 50px; height: 100%; background: none; cursor: pointer; transition: .3s ease; } .header2023_center_content .header2023_account_cart .cart .cart_icon_container { position: relative; z-index: 1002; display: block; width: 46px; height: 46px; } .header2023_center_content .header2023_account_cart .cart .cart_icon { width: 34px; margin: 6px; } .header2023_center_content .header2023_account_cart .cart .cart_icon g { fill: #FF8615; transition: .3s ease; } .header2023_center .cart_icon_container:hover .cart_icon g { fill: #FF9606; transition: .3s ease; } .header2023_center .cart_icon.opened g { fill: #FFF !important; transition: .3s ease; } .header2023_center_content .header2023_account_cart .cart .cart_icon_products_count { position: absolute; top: 4px; right: -5px; width: 20px; height: 20px; font-size: 12px; color: #f1f1f1; font-weight: 600; text-align: center; line-height: 21px; background: #404040; border-radius: 50%; } .header2023_center_content .cart_slider_frame { position: absolute; z-index: 1001; display: none; top: 0; right: 0; width: 380px; height: 100vh; overflow: hidden; } .header2023_center_content .cart_slider_empty { position: absolute; top: 12px; right: -280px; width: 270px; min-height: 46px; border-radius: 24px; background: #404040; overflow: hidden; transition: all .8s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .cart_slider_empty.opened { right: 0; transition: all .8s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .cart_slider { position: absolute; top: 12px; right: -370px; width: 358px; height: auto; transition: all .5s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .cart_slider.opened { right: 0; transition: all .5s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .cart_slider_products_count { width: 100%; height: 46px; font-size: 14px; padding: 15px 0 12px 20px; color: #FFF; background: #404040; border-radius: 10px 24px 0 0; text-wrap: nowrap; } .header2023_center_content .cart_slider_empty .cart_slider_products_count { border-radius: 24px; } .header2023_center_content .cart_slider_content { display: none; width: 100%; margin: 0 auto; background: #404040; border-radius: 0 0 10px 10px; overflow: hidden; } .cart_slider_products { width: calc(100% - 4px); margin: 0 2px; max-height: 50vh; padding: 4px; background: #FFF; overflow-y: auto; } .csp_line { float: left; width: 100%; height: 100px; border-top: 1px solid #EF9D51; } .csp_line:first-child { border: none; } .csp_img { float: left; width: 100px; height: 100px; border-right: 1px dashed #404040; } .csp_img img { width: 80px; height: 80px; margin: 10px; } .csp_name { float: left; width: calc(100% - 110px); height: 70px; white-space: initial; padding: 10px; text-align: left; color: #404040; border-bottom: 1px dashed #404040; } .csp_link { color: #404040 !important; } .csp_link:hover, .csp_link:focus { color: #EF9D51 !important; } .csp_qty { float: left; height: 30px; padding: 6px; color: #626568; border-right: 1px dashed #F1F1F1; } .csp_price { float: left; height: 30px; padding: 6px; color: #EF9D51; border-right: 1px dashed #F1F1F1; } .csp_delete { float: right; height: 30px; } .csp_delete_button { height: 30px; padding: 0; border: none; background: none; } .csp_delete_button:focus { outline: none; } .csp_delete_icon { width: 24px; height: 18px; margin: 4px 6px 0 0; } .cart_slider_total { width: calc(100% - 4px); margin: 2px 2px 0 2px; height: 26px; background: #FFF; text-align: left; font-size: 16px; color: #303030; padding: 6px; } .csp_total_amount { float: right; font-weight: 600; color: #EF9D51; } .cart_slider .cart_slider_btn { display: block; width: calc(100% - 4px); height: 42px; text-align: center; background: #EF9D51; color: #FFF !important; font-size: 16px; margin: 2px; padding: 8px; border-radius: 0 0 8px 8px; } .cart_slider_btn_icon { display: inline-block; width: 24px; fill: #FFF; vertical-align: -5px; margin-left: 4px; } .header2023_center_content .cart_slider_product_added { position: absolute; top: 12px; right: -360px; width: 358px; border-radius: 10px 24px 10px 10px; background: #404040; transition: all .8s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .cart_slider_product_added.opened { right: 0; transition: all .8s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .cart_slider_product_added .title { display: flex; align-items: center; width: 100%; height: 46px; font-size: 14px; padding-left: 8px; color: #FFF; background: #404040; border-radius: 24px; text-wrap: nowrap; } .header2023_center_content .cart_slider_product_added .title svg { width: 30px; margin-right: 6px; } .header2023_center_content .cart_slider_product_added_content { position: relative; display: none; margin: 0 2px; background: #FFF; overflow: auto; } .cart_slider_product_added .cart_slider_btn { display: block; width: calc(100% - 4px); height: 42px; text-align: center; background: #EF9D51; color: #FFF !important; font-size: 16px; margin: 2px; padding: 8px; } .header2023_center_content .cart .cart_slider_mask { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(192, 192, 192, 0.42); cursor: default; } .header2023_center_content .cart .cart_slider_mask .header_transparent { height: 95px; } .header2023_center_content .cart .cart_slider_mask .fullpage { height: calc(100vh - 80px); background: rgb(104 104 104 / 73%); } .header2023_bottom { height: 41px; /*padding: 7px calc((100% - 1110px) / 2) 0 calc((100% - 1110px) / 2);*/ padding: 7px 0 0 0; background: #F1F1F1; margin-bottom: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .header2023_bottom_content { display: flex; justify-content: space-between; width: 1110px; margin: 0 auto; height: 40px; } .header2023_bottom_content .link { font-size: 14px; color: #404040 !important; line-height: 46px; font-weight: 600; transition: .3s ease; } .header2023_bottom_content .link:hover { color: #404040 !important; transition: .3s ease; } .header2023_bottom_content .separator { width: 1px; height: 26px; border-right: 1px solid #404040; margin-top: 10px; } @media (max-width: 1140px) { .header2023_top .buttons { width: 100%; padding: 0 10px; } .header2023_center_content { width: 100%; padding: 0 20px; } .header2023_center_content .header2023_search { width: calc(100% - (2 * 200px)); } } @media (max-width: 1024px) { .header2023_container.fixed .header2023_bottom { display: block; } .header2023_top { float: left; width: 100%; } .header2023_top .buttons { width: 100%; padding: 0 10px; } .header2023_center { float: right; width: calc(100% - 70px); padding: 0 10px 0 0; } .header2023_center_content { width: 100%; padding: 0; justify-content: space-between; } .header2023_bottom { float: left; width: 70px; height: 70px; padding: 0; box-shadow: none; } .changestatus.ets_mm_megamenu.hook-custom { margin-top: 0; } .menu2023 { border: none !important; background: #F1F1F1 !important; } .menu2023 .container { padding: 0; } .menu2023 .ybc-menu-toggle { display: flex; justify-content: center; align-items: center; height: 70px; padding: 0; line-height: 0; } .menu2023 .ybc-menu-toggle .menu_icon { position: relative; width: 40px; height: 40px; } .menu2023 .ybc-menu-toggle .menu_open_icon { position: absolute; top: 0; left: -70px; height: 40px; transition: all 1s cubic-bezier(.47,1.64,.41,.8); } .menu2023 .ybc-menu-toggle .menu_open_icon.active { left: 0; transition: all 1s cubic-bezier(.47,1.64,.41,.8); } .menu2023 .ybc-menu-toggle .menu_close_icon { position: absolute; top: 0; left: -70px; height: 40px; transition: all 1s cubic-bezier(.47,1.64,.41,.8); } .menu2023 .ybc-menu-toggle .menu_close_icon.active { left: 0; transition: all 1s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .header2023_logo { width: 170px; } .header2023_center_content .header2023_logo img { width: 140px; margin: 2px 10px 0 10px; } .header2023_center_content .header2023_search { width: calc(100% - (170px + 120px)); } .header2023_center_content .header2023_search .input_container { width: 88%; } .header2023_center_content .header2023_account_cart { width: 120px; } .header2023_center_content .header2023_account_cart .account { width: 50px; } .header2023_center_content .header2023_account_cart .cart { justify-content: flex-start; width: 70px; padding-left: 12px; } .header2023_center .account span { display: none; } } @media (max-width: 520px) { .header2023_top { display: block; width: 100%; margin-top: 0; } .header2023_top .buttons .button_right { display: none; } .header2023_top .buttons .header_tchat { float: right; } .header2023_top .buttons a span { display: none; } .header2023_center.fixed { left: 70px; width: calc(100% - 70px); } .header2023_bottom { height: 56px; } /* .header2023_bottom.fixed { position: fixed; top: 0; left: 0; width: 70px; } .header2023_bottom.fixed::after { content: ''; position: absolute; bottom: -6px; width: 100%; height: 6px; background: linear-gradient(180deg, rgba(171,171,171,1) 0%, rgba(255,255,255,0) 100%); } */ .menu2023 .container { background: none; } .menu2023 .ybc-menu-toggle { height: 56px; } .header2023_center { height: 56px; } .header2023_center_content { height: 56px; padding-right: 5px; } .header2023_center_content.homepage .header2023_logo { width: calc(100% - 120px); } .header2023_center_content .header2023_logo { width: calc(100% - 180px); } .header2023_center_content .header2023_logo a { display: block; width: 100%; text-align: center; } .header2023_center_content .header2023_logo img { width: 128px; } @media (max-width: 375px) { .header2023_center_content .header2023_logo img { width: 100px; } } .header2023_center_content .header2023_mobile_search_button { position: relative; display: flex; justify-content: center; align-items: center; width: 60px; } .header2023_center_content .header2023_mobile_search_button input { position: absolute; width: 80%; height: 80%; border: none; background: none; } .header2023_center_content .header2023_mobile_search_button::after { content: ''; position: absolute; top: 20%; right: 0; width: 1px; height: 60%; border-right: 1px solid #404040; } .header2023_center_content .header2023_mobile_search_button .search_m_icon { width: 38px; } .header2023_center_content .account_cart { width: 120px; } .header2023_center .cart_icon_container.prods, .header2023_center .cart_icon_container.noprods { display: block !important; } .header2023_center_content .header2023_account_cart .account { display: flex; justify-content: center; width: 60px; } .header2023_center_content .header2023_account_cart .account .account_icon { margin: 0; } .header2023_center_content .header2023_account_cart .cart { justify-content: center; width: 60px; padding: 0; } .header2023_center .cart_icon_container.prods, .header2023_center .cart_icon_container.noprods { display: none !important; } .header2023_center_content .header2023_search { display: none; } .header2023_center_content .cart_slider_product_added.opened { opacity: 1; width: calc(100vw - 40px); top: 4px; right: 5px; transition: all .8s cubic-bezier(.47,1.64,.41,.8); } .header2023_center_content .continue_shopping { height: 42px; margin: 2px; background: #626568; text-align: center; font-size: 16px; text-transform: uppercase; color: #FFF; line-height: 42px; } } @media (min-width: 521px) { .header2023_center_content .mobile { display: none !important; } } @media (max-width: 520px) { .header2023_center_content .desktop { display: none !important; } } @media (min-width: 1200px) { #dfclassic { width: 1000px !important; left: calc((100vw - 1000px) / 2) !important; } } #checkout .header { padding: 15px 0; background: #F1F1F1; } #checkout .header_container { width: 1110px; margin: 0 auto; background: #F1F1F1; } @media (max-width: 1024px) { #checkout .header_container { width: 100%; text-align: center; } } #checkout .checkout_steps_title { font-size: 17px; font-weight: 600; padding: 0 0 10px 0; margin: 6px 0 18px 6px; border-bottom: 2px solid #EF9D51; } #checkout input.form-control { background: #FFF; border: 1px solid #61D0C4; } #checkout input.form-control:focus { outline: none; } #checkout .input-group.focus { outline: none; } /* HEADER CHECKOUT */ #checkout .header { position: relative; } #checkout .header .logo { text-align: center; } #checkout .header .continue_shopping { position: absolute; left: 15px; bottom: calc((100% - 30px) / 2); height: 30px; padding: 6px 15px; background: #FFF; font-size: 12px; color: #404040; border-radius: 3px; } #checkout .header .continue_shopping .arrow_left { font-size: 24px; margin-right: 10px; vertical-align: -2px; } @media (max-width: 768px) { #checkout .header .continue_shopping { left: 0; bottom: -30px; } } /* PGE NOT FOUND OR NO PRODUCTS */ .oops { text-align: center; margin-top: 40px; } .oops .big { display: block; font-size: 30px; font-weight: 600; color: #61D0C4; text-transform: uppercase; margin-bottom: 58px; } /* LOGIN SOCIALS */ #authentication #white_rounded_edge_shape { margin-top: 10px; } /* VAT CHECK ON ADDRESS FORM */ .check_vat_container { position: relative; display: grid; grid-template-columns: 3fr 1fr; grid-template-rows: 1fr; gap: 0 0; grid-template-areas: "help check_vat_btn_container"; width: 100%; min-height: 46px; top: 6px; background: #626568; } .check_vat_container .help { grid-area: help; font-size: 14px; color: #FFF; padding: 7px; } .check_vat_container .help small { color: #FFF !important; } .check_vat_container .check_vat_btn_container { grid-area: check_vat_btn_container; float: left; width: 120px; } .check_vat_container .check_vat_btn_container .vat_btn { display: flex; align-items: center; justify-content: center; height: 30px; margin: 12px; background: #CCC; font-size: 16px; color: #FFF; text-transform: uppercase; font-weight: 600; border-radius: 3px; cursor: default; } .check_vat_container .check_vat_btn_container .vat_btn.active { background: #61D0C4; cursor: pointer; } .check_vat_container .check_vat_btn_container .vat_btn.valid { display: none; background: #61E30D; } .check_vat_container .check_vat_btn_container .vat_btn.failed { display: none; background: #E54111; } .check_vat_container .check_vat_btn_container .vat_btn.valid .icon { width: 20px; vertical-align: -3px; margin-right: 6px; } .check_vat_container .check_vat_btn_container .vat_btn.failed .icon { width: 30px; vertical-align: -9px; margin: 0 0 0 -5px; } .check_vat_container .check_vat_btn_container .loading { position: absolute; display: none; top: calc((100% - 50px) / 2); right: -70px; width: 50px; height: 50px; } @media (max-width: 480px) { .check_vat_container { grid-template-columns: 1fr; grid-template-areas: "check_vat_btn_container" "help"; } .check_vat_container .check_vat_btn_container { width: 100%; } .check_vat_container .check_vat_btn_container .vat_btn { display: inline-flex; width: calc(100% - 72px); } .check_vat_container .help { width: 100%; padding: 0 10px 10px 10px; } .check_vat_container .check_vat_btn_container .loading { position: relative; top: -4px; right: auto; width: 44px; height: 44px; } } .form-control { color: #151515; } .form-control:focus { outline: 1px solid #61D0C4; } .submenu_links_1 { display: flex; position: relative; width: 1110px; justify-content: flex-start; align-items: center; gap: 15px; margin: 15px calc((100% - 1110px) / 2); /*border: 1px dashed orange;*/ } .submenu_links_1 .link_1 { position: relative; display: block; min-width: 112px; height: 42px; font-size: 12px; color: #404040; font-weight: 600; text-transform: uppercase; line-height: 41px; text-align: center; padding: 0 28px; border: 1px solid #B5B5B5; border-radius: 6px; transition: .5s ease; } .submenu_links_1 .link_1.children { padding: 0 50px 0 28px; } .submenu_links_1 .link_1:hover { background: #EF9D51; border-color: #EF9D51; cursor: pointer; transition: 1.5s ease; } .submenu_links_1 .link_1:hover g { fill: #FFF !important; } .submenu_links_1 .link_1.children::after { position: absolute; top: -1px; right: 20px; content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 600; font-size: 20px; color: #EF9D51; transition: .5s ease; } .submenu_links_1 .link_1.children:hover::after { right: 12px; color: #FFF; } .submenu_links_1 .link_1.reduced { display: flex; align-items: center; justify-content: center; min-width: 42px; padding: 0; transition: 1.2s ease; } .submenu_links_1 .link_1.reduced::after { display: none; } .submenu_links_1 .link_1.reduced .text { display: none; position: absolute; bottom: -15px; width: 200px; font-size: 12px; font-weight: 400; line-height: 0; } .submenu_links_1 .link_1.reduced .text.visible { display: block; } .submenu_links_1 .link_1 svg { display: none; } .submenu_links_1 .link_1.reduced svg { display: block; transition: 1.2s ease; } .submenu_links_1 .link_1 .parts_icon { height: 30px; } .submenu_links_1 .link_1 .parts_icon g { fill: #626568; } .submenu_links_1 .link_1 .kits_icon { height: 32px } .submenu_links_1 .link_1 .kits_icon g { fill: #626568; } .submenu_links_1 .link_1 .tools_icon { height: 34px; } .submenu_links_1 .link_1 .tools_icon g { fill: #626568; } .submenu_links_1 .link_1 .access_icon { height: 32px; } .submenu_links_1 .link_1 .access_icon g { fill: #626568; } .submenu_links_1 .link_1 .tutos_icon { height: 32px; } .submenu_links_1 .link_1 .tutos_icon g { fill: #626568; } .submenu_links_1 .link_1 .teardown_icon { height: 28px; } .submenu_links_1 .link_1 .teardown_icon g { fill: #626568; } .submenu_links_1 .link_1.selected { background: #EF9D51; border-color: #EF9D51; } .submenu_links_1 .link_1.selected svg g { fill: #FFF; } .submenu_links_2 { position: absolute; display: flex; justify-content: flex-start; gap: 10px; top: -100px; left: 380px; width: calc(100% - 380px); transition: .7s ease; } .submenu_links_2.selected { top: 0; transition: .7s ease; } .submenu_links_2 a { display: block; height: 42px; text-align: center; color: #404040; line-height: 41px; padding: 0 14px; border: 1px solid #EF9D51; border-radius: 6px; } .submenu_links_2 a:hover { background: #EF9D51; transition: 1.5s ease; } #product .watermark { position: absolute; z-index: 3; top: calc(50% - 10px); left: 0; width: calc(100% + 40px); height: 20px; font-size: 16px; color: #FFFFFF25; text-align: center; margin: 0 -20px; overflow: hidden; } #product .modal .watermark { top: calc(50% - 16px); height: 32px; font-size: 32px; line-height: 30px; color: #FFFFFF10; } #product .fake_img { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } #product .fake_img img { width: 100%; height: 100%; } #product .product-cover .layer { z-index: 1; } #product .modal { z-index: 99999; background: #2b2b2bd4; } #product .modal-body { padding: 0; } #module-bricophonetutos-pics .main_image_container { position: relative; } #module-bricophonetutos-pics .watermark { position: absolute; z-index: 3; top: 256px; left: 0; width: calc(100% + 40px); height: 30px; font-size: 30px; color: #FFFFFF10; text-align: center; line-height: 32px; margin: 0 -20px; overflow: hidden; } #module-bricophonetutos-pics .copyright { position: absolute; bottom: 24px; right: 7px; font-size: 10px; color: #828282; } #module-bricophonetutos-pics .fake_img { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: calc(100% - 138px); opacity: 0; } #module-bricophonetutos-pics .fake_img img { width: 100%; height: 100%; } /* HOMEPAGE WITH FULLWIDTH SEARCH BAR ON MOBILE */ .header2023_mobile_search_bar { display: none; } @media (max-width: 560px) { #module-bricophonetutos-pics .watermark { top: 100px; font-size: 14px; } #module-bricophonetutos-pics .copyright { font-size: 8px; } .header2023_mobile_search_bar { position: relative; display: block; float: left; width: 100%; padding: 6px; background: #eee; } .header2023_mobile_search_bar .input { position: relative; top: -4px; width: 100%; height: 48px; border: none; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); font-family: sans-serif; font-size: 18px; color: #c9c9c9; padding-left: 15px; } .header2023_mobile_search_bar .icon { position: absolute; top: 8px; right: 20px; width: 36px; } #dfclassic { top: 80px; left: -2px; z-index: 999 !important; } } /* CHECKOUT CUSTOMIZE DISPLAY WITH STRIPE */ #checkout .payment_bloc { cursor: pointer; } #checkout .payment-options { display: flex; flex-direction: column; } #checkout .payment-options label { margin-bottom: 0; } #checkout .payment-options div:not(.additional-information) { order: 99; } #checkout .payment-options .clicandpay { order: 1 !important; } #checkout .payment-options .clicandpay + .additional-information { order: 2 !important; } #checkout .payment-options .clicandpay label img { display: none; } #checkout .payment-options .stripe_official { order: 3 !important; } #checkout .payment-options .stripe_official + .js-payment-option-form { order: 4 !important; width: calc(100% - 40px); margin: -12px 15px 40px 15px; padding: 12px 10px 0 10px; background: #ef9d51; border-radius: 0 0 10px 10px; } #checkout .payment-options .paypal { order: 5 !important; } #checkout .payment-options .paypal + .additional-information { order: 6 !important; width: 100%; margin: -10px 0 30px 0; padding: 8px; background: #91be2166; } #checkout .payment-options .paypal .paypal-marks { display: none; } #checkout .payment-options .ps_wirepayment { order: 7 !important; } #checkout .payment-options .ps_wirepayment + .additional-information { order: 8 !important; padding: 8px; } #checkout .payment-options .payment-option { display: flex; } #checkout .payment-options .payment_btn_radio { display: flex; justify-content: center; align-items: center; width: 10%; border-radius: 10px 0 0 10px; background: #FFF; } #checkout .payment-options .payment_btn_radio .custom-radio { margin-right: 0 !important; } #checkout .payment-options .payment_text { width: 50%; border-radius: 0 10px 10px 0; background: #FFF; } #checkout .payment-options .payment_logos { display: flex; width: calc(40% - 10px); overflow: hidden; justify-content: center; align-items: center; margin-left: 10px; border-radius: 10px; background: #FFF; } #checkout .payment-options .clicandpay_img { height: 56px; } #checkout .payment-options .stripe_img { height: 38px; } #checkout .payment-options .paypal1_img, #checkout .payment-options .paypal2_img { height: 40px; } #checkout .payment-options .transfer_img { height: 36px; } @media (max-width: 560px) { #checkout #checkout-payment-step .content { padding: 10px 0 0 4px; } #checkout .payment-options .clicandpay_img { height: 44px; } #checkout .payment-options .stripe_img { height: 28px; } #checkout .payment-options .paypal1_img, #checkout .payment-options .paypal2_img { height: 22px; } #checkout .payment-options .transfer_img { height: 26px; } } /* DELAYS */ @media(max-width: 560px) { .delay_desktop { display: none; } .delay_mobile { display: inline-block; } .pic_pdt_stock .fa-warehouse { display: none; } } @media(min-width: 561px) { .delay_desktop { display: inline-block; } .delay_mobile { display: none; } } /* CMS TITLES */ #cms .h1 { font-size: 20px; color: #61d0c4; font-style: italic; text-align: center; } /* CART INFOS --- FREE SHIPPING, REASSURANCE AND TOTALS */ .reassurance_container { display: flex; float: left; width: calc(50% - 10px); height: 130px; margin-bottom: 20px; flex-direction: row; justify-content: space-evenly; align-items: center; border: 1px solid #f1f1f1; } .reassurance_container .reassurance_block { width: 80px; height: 114px; } .reassurance_container .reassurance_block p { margin: 4px 0 0 0; font-size: 12px; text-align: center; line-height: 14px; } .hydro_free_shipping { position: relative; float: left; width: calc(50% - 10px); height: 130px; margin: 0 20px 20px 0; } .hydro_free_shipping .model_form { width: 100%; height: 100%; background: rgb(255,153,0); background: linear-gradient(0deg, rgba(255,153,0,1) 0%, rgba(247,175,119,1) 100%); } .hydro_free_shipping .block_1 { float: left; width: 50%; height: 100%; background-image: url(../../../../img/cms/CHECKOUT/glass_screen.svg); background-repeat: no-repeat; background-size: 160px; background-position: 64px 0; } .hydro_free_shipping .block_2 { float: left; width: 48%; height: 50%; } .hydro_free_shipping .block_3 { float: left; width: 48%; height: 50%; padding-top: 6px; } .hydro_free_shipping .block_1 .title_1 { position: relative; width: 82%; top: 34px; left: 10%; font-size: 14px; font-weight: 400; color: #ef9d51; text-align: center; line-height: 16px; background: #fff; padding: 6px 10px; border: 1px solid #ff9900; border-radius: 10px; transform: rotate(355deg); } .hydro_free_shipping .block_1 .title_1 .mobile { display: none; } .hydro_free_shipping .block_1 .title_1 b { font-size: 18px; font-weight: 600; } .hydro_free_shipping .block_1 .title_1::before { content: ''; display: block; position: absolute; bottom: -18px; left: -20px; width: 46px; height: 54px; background-image: url(../../../../img/cms/CHECKOUT/hammer_icon.svg); background-repeat: no-repeat; } .hydro_free_shipping .block_2 .title_2 { position: relative; top: 2px; text-align: center; padding: 6px 0; } .hydro_free_shipping .block_2 .title_2 b { display: block; font-size: 18px; font-weight: 600; color: #fff; line-height: 20px; margin-bottom: 3px; } .hydro_free_shipping .block_2 .title_2 span { font-size: 12px; color: #ffdd84; font-weight: 600; text-transform: uppercase; } .hydro_free_shipping .block_2 .title_2 i { font-size: 12px; color: #ffdd84; font-weight: 600; } .hydro_free_shipping .block_3 #select_hydro { position: relative; width: 100%; height: 34px; background: #fff; margin-top: 2px; border-radius: 6px; } .hydro_free_shipping .block_3 #select_hydro #hydro_loading { display: none; position: absolute; z-index: 10; top: 3px; left: 3px; width: 28px; } .hydro_free_shipping .block_3 #select_hydro #hydro_input { width: 100%; height: 100%; background: none; text-align: center; font-size: 15px; line-height: 40px; color: #222; border: 1px solid #ff9900; } .hydro_free_shipping .block_3 #select_hydro #hydro_input::placeholder { color: #ff9900; text-align: center; padding: 0; } .hydro_free_shipping .block_3 #select_hydro #hydro_input:focus { outline: none; } .hydro_free_shipping .block_3 #select_hydro #hydro_input:focus::placeholder { color: #222; } .hydro_free_shipping .block_3 #hydro_results { display: none; position: relative; z-index: 3; top: -6px; left: 0px; width: 100%; max-height: 192px; padding-top: 12px; background: #FFF; border-left: 1px solid #ff9900; border-bottom: 1px solid #ff9900; border-right: 1px solid #ff9900; border-radius: 0 0 6px 6px; } .hydro_free_shipping .block_3 #hydro_results li { width: 100%; height: 30px; font-size: 16px; color: #404040; text-align: center; padding: 0 10px 0 0; } .hydro_free_shipping .block_3 #hydro_results li button { width: 100%; background: none; border: none; text-align: right; font-size: 16px; color: #404040; } .hydro_free_shipping .block_3 #hydro_results li button:focus { outline: none; } .hydro_free_shipping .block_3 #hydro_results li button:hover { color: #ff9900; cursor: pointer; } .hydro_free_shipping .block_3 .title_3 { font-size: 8px; color: #fff; text-align: center; margin-top: 5px; } .hydro_free_shipping .block_3 #show_glass_models { text-decoration: underline; cursor: pointer; } .hydro_free_shipping button:focus { outline: none; } .hydro_free_shipping #limit_reached { position: absolute; z-index: 1; top: 84px; left: 280px; font-size: 17px; color: #bb2222; font-weight: 600; } .hydro_free_shipping .glass_models_list_container { display: none; position: fixed; z-index: 98; top: 0; left: 0; width: 100%; height: 100%; background: #404040de; } .hydro_free_shipping .glass_models_list { display: none; position: fixed; z-index: 99; top: 160px; left: 35%; width: 30%; height: 60%; background: #fafafa; font-size: 15px; color: #61d0c4; line-height: 20px; padding: 15px; border-radius: 8px; overflow-x: auto; } .hydro_free_shipping .glass_models_list p { color: #404040; text-transform: uppercase; border-bottom: 1px solid #404040; } .hydro_free_shipping .hydro_and_glass { position: relative; display: flex; justify-content: space-between; width: 100%; height: 100%; border: 1px solid #ff9900; } .hydro_free_shipping .hydro_and_glass .change_model { position: relative; display: inline-flex; width: 90px; text-decoration: underline; border: none; font-size: 12px; color: #ff9900; text-transform: uppercase; background: #efefef; justify-content: center; align-items: center; } .hydro_free_shipping .hydro_and_glass .hag_article { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .hydro_free_shipping .hydro_and_glass .hydro { border-right: 1px solid #f1f1f1; } .hydro_free_shipping .hydro_and_glass .hag_article img { width: 66px; height: 66px; } .hydro_free_shipping .hydro_and_glass .hag_article p { width: 90%; margin: 0; font-size: 11px; text-align: center; line-height: 12px; } .hydro_free_shipping .hydro_and_glass .hag_article button { border: none; background: #ff9900; text-transform: uppercase; color: #fff; padding: 2px 12px; margin-top: 4px; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .hydro_free_shipping .hydro_and_glass .hag_article button:disabled { background: #ccc; cursor: not-allowed; } .hydro_free_shipping .hidden { display: none !important; } #cart .cart_totals { width: calc(50% - 10px); float: right; } #cart .cart_totals .cart-detailed-totals { padding: 10px; background: #F1F1F1; } #cart .cart_totals .cart-summary-line { font-size: 20px; line-height: 1.5; border-bottom: 2px solid #FFF; } #cart .cart_totals .cart-summary-line .value { font-size: 20px; } #cart .cart_totals .cart-summary-line .label { font-size: 18px; } #cart .cart_totals .cart-summary-line .sub_label { display: block; color: #626568; font-weight: normal; font-size: 14px; margin-bottom: -25px; } #cart .cart_totals .promo-code-button { float: left; width: 100%; margin: 0; color: #626568; font-weight: normal; line-height: 3; } #cart .cart_totals .cart-voucher .promo-code { float: left; width: 100%; padding: 0; background: #F1F1F1; } #cart .cart_totals .cart-total { display: block; height: 40px; font-weight: 700; padding-top: 10px; } /* ORDER HISTORY */ #history .orders_count { width: calc((100% - 360px) / 2); height: 40px; padding-left: 20px; line-height: 40px; color: #000; } #history .search { width: calc((100% - 360px) / 2); text-align: right; height: 40px; padding-right: 20px; line-height: 40px; } #history .search input { width: 180px; height: 24px; border: none; padding-left: 10px; } #history .search input:focus { outline: none; } #history .history_pages_range { display: flex; justify-content: center; height: 40px; background: #f1f1f1; border-radius: 10px; margin-bottom: 20px; } #history .history_pages_range .sections_container { position: relative; width: 280px; height: 40px; overflow: hidden; } #history .history_pages_range .sections_container .sections { position: absolute; top: 0; left: 0; width: 4000px; transition: all 600ms cubic-bezier(.47,1.64,.41,.8); } #history .history_pages_range .sections_container .sections .section { display: inline-flex; justify-content: center; align-items: center; gap: 6px; width: 280px; height: 40px; padding: 6px; } #history .history_pages_range .sections_container .sections .section .page_number { display: block; width: 20px; height: 20px; background: #fff; border-radius: 6px; font-size: 12px; text-align: center; line-height: 20px; } #history .history_pages_range .sections_container .sections .section .page_number.active { color: #fff; background: #61d0c4; font-weight: 600; } #history .history_pages_range .slide_btn_container { display: flex; justify-content: space-around; align-items: center; width: 40px; height: 40px; } #history .history_pages_range .slide_btn_container .slide_btn { width: 20px; height: 20px; background: #fff; border-radius: 6px; font-size: 18px; color: #000; text-align: center; line-height: 20px; cursor: pointer; } #history .history_pages_range .slide_btn_container .slide_btn.disabled { color: #ccc; background: #f1f1f1; cursor: default; } #history .history_pages_range .slide_btn_container .slide_btn:hover { color: #fff; background: #61d0c4; } #history .oh_container { display: grid; grid-template-columns: calc(100% - 160px) 160px; grid-template-rows: 36px auto; grid-template-areas: "reference_date reference_date" "orders bonus"; margin-bottom: 20px; background: #f8f8f8; border-radius: 0 0 8px 8px; } #history .oh_container .reference_date { grid-area: reference_date; padding: 10px; font-size: 13px; color: #fff; background: #404040; border-radius: 8px 8px 0 0; } #history .oh_container .orders { grid-area: orders; margin: 0; } #history .oh_container .orders .order { display: grid; grid-template-columns: calc(100% - 480px) 160px 160px 160px; grid-template-rows: 84px 36px; grid-template-areas: "payment_status invoice details reorder" "tracking invoice details reorder"; padding: 4px; border: none; } #history .oh_container .orders .order .payment_status { grid-area: payment_status; padding: 10px; } #history .oh_container .orders .order .payment_status ul { font-size: 12px; line-height: 20px; } #history .oh_container .orders .order .payment_status ul b { color: #61d0c4 } #history .oh_container .orders .order .payment_status ul .label_status { color: #fff; padding: 2px 4px; border-radius: 6px; } #history .oh_container .orders .order .tracking { grid-area: tracking; display: flex; align-items: center; padding-left: 10px; gap: 10px; border-top: 1px solid #ccc; } #history .oh_container .orders .order .tracking svg { width: 20px; } #history .oh_container .orders .order .tracking a { font-size: 12px; text-decoration: underline; } #history .oh_container .link_btn a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } #history .oh_container .link_btn a .image { height: 44px; margin-bottom: 6px; } #history .oh_container .link_btn_text { display: block; height: 20px; text-transform: uppercase; font-size: 10px; text-align: center; } #history .oh_container .orders .order .invoice { grid-area: invoice; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #history .oh_container .orders .order .invoice svg { width: 36px; } #history .oh_container .orders .order .details { grid-area: details; } #history .oh_container .orders .order .details svg { height: 40px; } #history .oh_container .orders .order .reorder { grid-area: reorder; border-left: 1px solid #ccc; } #history .oh_container .orders .order .reorder svg { height: 36px; } #history .oh_container .bonus { grid-area: bonus; display: flex; justify-content: center; align-items: center; border-left: 1px solid #ccc; } #history .oh_container .bonus a { text-decoration: none !important; } #history .oh_container .bonus .link_btn_text.open_bonus { max-width: 60%; height: auto; font-size: 20px; color: #fff; line-height: 22px; padding: 26px 14px; background: #00b5e2; border-radius: 12px; margin-bottom: 15px; } #history .oh_container .bonus .image { margin: 15px 0 !important; } #history .oh_container .bonus img { height: 44px; mix-blend-mode: multiply; } @media (max-width: 560px) { #history .history_pages_range { height: auto; flex-wrap: wrap; } #history .history_pages_range .slide_btn_container { width: 20px; } #history .history_pages_range .orders_count, #history .history_pages_range .search { width: 100%; text-align: center; padding: 0; } #history .history_pages_range .search input { width: 80%; } #history .oh_container { display: grid; grid-template-columns: 100%; grid-template-rows: 36px auto auto; grid-template-areas: "reference_date" "orders" "bonus"; margin-bottom: 20px; background: #f8f8f8; border-radius: 0 0 8px 8px; } #history .oh_container .orders .order { display: grid; grid-template-columns: 66% 34%; grid-template-rows: 36px 36px 36px; grid-template-areas: "payment_status invoice" "payment_status details" "tracking reorder"; padding: 4px; margin-bottom: 6px; border-bottom: 2px solid #fff; } #history .oh_container .orders .order .payment_status { padding: 2px 10px; border-right: 1px solid #ccc; } #history .oh_container .orders .order .tracking { border-right: 1px solid #ccc; } #history .oh_container .link_btn { border: none !important; } #history .oh_container .link_btn a { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; padding-left: 12px; text-decoration: underline; } #history .oh_container .orders .order .invoice svg { width: 20px; margin: 12px 0 0 0; } #history .oh_container .orders .order .details svg { width: 26px; margin: 3px 0 0 -3px; } #history .oh_container .orders .order .reorder svg { width: 20px; margin: 4px 4px 0 0; } #history .oh_container .link_btn_text { text-align: left; line-height: 14px; } #history .oh_container .link_btn.bonus a { justify-content: center; padding: 6px 0 12px 0 } #history .oh_container .bonus .link_btn_text.open_bonus { font-size: 16px; line-height: 22px; padding: 8px 14px; margin-bottom: 0; margin-left: 15px; } } @media (max-width: 768px) { .cart_infos { display: flex; flex-direction: column; } .cart_infos img { width: 50%; } .hydro_free_shipping { width: 100%; height: auto; } .hydro_free_shipping .model_form { height: 160px; } .hydro_free_shipping .block_1 { position: relative; width: 50%; height: 90px; background-size: 70%; background-position: 32% 2px; } .hydro_free_shipping .block_1 .title_1 { position: absolute; width: 100%; top: inherit; bottom: -4px; left: 12px; padding: 2px; } .hydro_free_shipping .block_1 .title_1 b { display: block; font-size: 13px; } .hydro_free_shipping .block_1 .title_1 span.desktop { display: none; } .hydro_free_shipping .block_1 .title_1 span.mobile { display: block; font-size: 10px; margin-top: -4px; } .hydro_free_shipping .block_1 .title_1::before { content: ''; display: block; position: absolute; bottom: -8px; left: -8px; width: 26px; background-image: url(../../../../img/cms/CHECKOUT/hammer_icon.svg); background-repeat: no-repeat; } .hydro_free_shipping .block_2 { width: 50%; height: 90px; } .hydro_free_shipping .block_2 .title_2 { position: relative; text-align: right; padding-right: 10px; } .hydro_free_shipping .block_2 .title_2 b { font-size: 16px; } .hydro_free_shipping .block_2 .title_2 span { display: block; font-size: 9.5px; margin-bottom: -4px; } .hydro_free_shipping .block_2 .title_2 i { font-size: 10.5px; } .hydro_free_shipping .block_2 #select_hydro { height: 50px; margin: 4px 0; border-radius: 10px; } .hydro_free_shipping .block_2 #select_hydro #hydro_input { font-size: 1.8em; line-height: 40px; color: #222; border: 1px solid #ff9900; } .hydro_free_shipping .block_2 #select_hydro #hydro_input::placeholder { color: #ff9900; text-align: center; } .hydro_free_shipping .block_2 #select_hydro #hydro_loading { display: none; position: absolute; z-index: 10; top: 8px; left: 4px; width: 34px; } .hydro_free_shipping .block_2 .title_3 { font-size: 1.2em; margin-top: 18px; } .hydro_free_shipping .block_2 #show_glass_models { display: block; } .hydro_free_shipping .block_3 { width: 100%; height: 70px; padding: 0; } .hydro_free_shipping .block_3 #select_hydro { position: relative; width: 80%; height: 34px; background: #fff; margin: 18px 10% 0 10%; border-radius: 8px; } .hydro_free_shipping .block_3 .title_3 { margin: 0; } .hydro_free_shipping .hydro_and_glass { height: 160px; flex-wrap: wrap; } .hydro_free_shipping .hydro_and_glass .hag_article { width: 50%; height: 140px; } .hydro_free_shipping .hydro_and_glass .hag_article img { width: 50px; height: 50px; } .hydro_free_shipping .hydro_and_glass .hag_article p { font-size: 10px; } .hydro_free_shipping .hydro_and_glass .hag_article button { font-size: 12px; } .hydro_free_shipping .hydro_and_glass .change_model { width: 100%; height: 18px; padding: 2px 4px; font-size: 10px; } .hydro_free_shipping .glass_models_list { width: 90%; left: 5%; } .reassurance_container { width: 100%; height: auto; } .reassurance_container .reassurance_block { width: 25%; height: auto; padding: 10px 0; text-align: center; } #cart .cart_totals { width: 100%; } } .submit_with_captcha { display: flex; float: right; flex-direction: reverse; gap: 15px; } @media (max-width: 560px) { .submit_with_captcha { flex-direction: column; margin-top: 30px; } } .alert-danger { background-color: #ef9d51; border: none; color: #fff; text-transform: uppercase; margin: -15px -15px 30px -15px; } .alert-danger ul { margin-block-start: 0; margin-block-end: 0; } /* DOOFINDER v9 */ /* .dfd-fullscreen { top: 30px !important; width: 840px !important; margin: 0 auto !important; background: none; --dfd-searchbox-height: 48px !important; --dfd-fullscreen-gap-x: 12px !important; --dfd-fullscreen-gap-y: 8px !important; --dfd-fullscreen-padding-y: 32px !important; --dfd-fullscreen-padding-x: 20px !important; } .dfd-fullscreen .dfd-close-button { opacity: 0; } .dfd-fullscreen .dfd-layer { background: none !important; gap: 0 !important; } .dfd-fullscreen .dfd-header { height: 70px !important; padding: 0 !important; gap: 0 !important; } .dfd-fullscreen .dfd-searchbox-main { flex: none !important; top: 22px; left: 78px; width: 378px; height: 30px; } .dfd-fullscreen .dfd-searchbox { height: 70px !important; background: none !important; border: none !important; } .dfd-fullscreen .dfd-searchbox .dfd-searchbox-input { position: relative !important; background: #ffffff !important; font-size: 13px; overflow: hidden !important; } .dfd-fullscreen .dfd-searchbox .dfd-searchbox-input.imei { padding-left: 225px !important; } .dfd-fullscreen .dfd-content { max-height: 86vh; background-color: #fff; overflow: hidden !important; border: 1px solid #111; border-radius: 10px; } .dfd-fullscreen .dfd-banner { text-align: left !important; margin: 0 -20px 20px -20px !important; background: #111; } .dfd-fullscreen .df-b a { display: flex; gap: 4px; margin: 6px 0 0 10px; } .dfd-fullscreen .df-b img { height: 80px; } .dfd-fullscreen .dfd-aside { display: none; } .dfd-fullscreen .dfd-results { height: calc(100% - 16px); } */ @media (min-width: 560px) { .dfd-fullscreen .dfd-layer { width: 900px !important; margin: 0 auto !important; background-color: transparent !important; } .dfd-backdrop { background-color: transparent !important; } .dfd-searchbox { top: 21px !important; left: 57px !important; width: 300px !important; height: 28px !important; border-bottom: none !important; } .dfd-searchbox-input { font-size: 13px !important; } .dfd-suggestions, .dfd-footer, .dfd-aside, .dfd-searchbox-slot, .dfd-close-button { display: none !important; } .dfd-content { background: #fff; padding: 10px; border: 1px solid #404040 !important; border-radius: 10px !important; margin-top: 4px; } .dfd-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #f5f5f5; } .dfd-content::-webkit-scrollbar { width: 12px; background-color: #f5f5f5; } .dfd-content::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: #61d0c4; } .dfd-results { margin: 0 -30px !important; } .dfd-meta { margin: 0 !important; } .dfd-banner { margin: 6px -20px 20px -20px !important; background-color: #050505; } .dfd-fullscreen .df-b a { display: flex; gap: 4px; margin: 6px 0 0 10px; } .dfd-fullscreen .df-b img { height: 80px; } .dfd-fullscreen .dfd-results-grid { display: flex; flex-direction: column; width: calc(100% + 10px); height: calc(100% - 10px); overflow-y: auto; padding-right: 20px; margin-top: 10px; gap: 8px; } .dfd-fullscreen .dfd-results-grid .dfd-card { flex-direction: row !important; align-items: flex-start; padding: 0; border-color: #dedede !important; background: none !important; --df-accent-primary: none !important; --df-accent-primary-hover: none !important; --df-accent-primary-active: none !important; } .dfd-fullscreen .dfd-results-grid .dfd-card:hover { border-color: #61d0c4 !important; } .dfd-fullscreen .dfd-results-grid .dfd-card .dfd-card-media { width: 70px; padding: 4px; border-right: 1px solid #dedede; } .dfd-fullscreen .dfd-results-grid .dfd-card .dfd-card-content { margin: 2px 0 0 10px; } .dfd-fullscreen .dfd-results-grid .dfd-card .dfd-card-content .dfd-card-title { font-size: 16px; font-weight: 700; color: #61d0c4; } .dfd-fullscreen .dfd-results-grid .dfd-card-preset-product .dfd-card-description { display: block !important; font-size: 13px; margin: -4px 0 -2px 0 !important; } .dfd-fullscreen .dfd-results-grid .dfd-card .dfd-card-content .dfd-card-row { align-items: flex-start; min-height: 24px; margin-top: 0; } .dfd-fullscreen .dfd-results-grid .dfd-card .dfd-card-content .dfd-card-price { font-size: 18px; font-weight: 700; color: #626568; } .dfd-fullscreen .dfd-results-grid .dfd-card .dfd-card-content .dfd-card-price.dfd-card-price--sale { color: #ef9d51 !important; } .dfd-no-results .dfd-title-xl { margin-bottom: 16px; background: #fff; font-size: 14px; color: #c48989; padding: 10px 20px; border-radius: 20px; } .dfd-no-results .dfd-recommended-products { display: none; } .dfd-fullscreen.paged { position: relative !important; z-index: 0; width: 1110px !important; top: -184px !important; margin: 0 calc((100vw - 1110px) / 2) !important; } .dfd-fullscreen.paged .dfd-searchbox-main { display: none !important; } .header2023_center_content .header2023_search .dfd-searchbox-main { width: 100%; height: 100%; border: none; color: #626568; line-height: 36px; background: #fff; border-radius: 20px; padding-left: 14px; cursor: text; } .header2023_center_content .header2023_search .dfd-searchbox-autocomplete { display: none; } .dfd-fullscreen.paged .dfd-layer { width: 100% !important; gap: 0; } .dfd-fullscreen.paged .dfd-header { margin-bottom: 136px; } .dfd-fullscreen.paged .dfd-searchbox-main { left: 178px; } .dfd-fullscreen.paged .dfd-aside { display: block !important; width: 260px !important; margin: 15px 0 0 -15px; } .dfd-fullscreen.paged .dfd-results { margin: 0 0 0 36px !important; } .dfd-fullscreen.paged .dfd-results-grid { overflow-y: hidden; } .dfd-fullscreen.paged .dfd-content { max-height: 74vh; border: 1px solid #ccc; } .dfd-fullscreen.paged .dfd-banner { margin: 6px -20px 20px -20px !important; background-color: #050505; } .search_results_title { font-size: 16px; font-weight: 600; } .search_results_header .container { position: relative; display: flex; align-items: center; gap: 10px; height: 80px; padding: 0 40px; margin-bottom: -20px; } .search_results_keywords { text-transform: uppercase; border: 1px solid #c5c5c5; padding: 6px 10px; border-radius: 6px; } #close_search { z-index: 1; font-size: 30px; color: #404040; cursor: pointer; } } @media (max-width: 560px) { #main_search_query_mobile:focus { outline: none; } } /* MONDIAL RELAY */ body#checkout section.checkout-step .delivery-option { background: #fff; padding: .9375rem 0; margin-top: .9375rem; margin-bottom: 0; border-radius: 12px; } body#checkout section.checkout-step .delivery-option-2 { cursor: pointer; } body#checkout .cart-summary-products a { text-transform: uppercase; } body#checkout section.checkout-step.-reachable.-complete h1 .step-edit { margin-right: 1.1rem; text-transform: uppercase; } body#checkout section.checkout-step .step-edit .edit { font-size: 1.5rem; vertical-align: -7px; } body#checkout #mondialrelay_widget { margin-bottom: 15px; } body#checkout #mondialrelay_save-relay { margin: -15px 0 30px 0; } body#checkout .carrier-extra-content { background: #fff; padding-bottom: 15px; border-radius: 0 0 12px 12px; } body#checkout #mondialrelay_content { margin: -25px 0 15px 0; padding-left: 20px; } body#checkout #mondialrelay_change-relay { margin: 10px 0 0px 0; } body#checkout button[name=confirmDeliveryOption] { margin-top: 15px; } @media (max-width: 560px) { body#checkout .carrier-extra-content { padding-bottom: 0; } body#checkout .delivery-option img { margin-bottom: 10px; } body#checkout .carrier-price { display: block; font-size: 20px; margin-top: 12px; } } /* BONUS PAGE QUESTIONS REPONSES */ .bonus_qr .bonus_qr_header { display: grid; grid-template-columns: 300px calc(100% - 300px); grid-template-rows: 120px 80px; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: "image title" "image subtitle"; margin: 25px 0; border-radius: 16px; overflow: hidden; } .bonus_qr .bonus_qr_header .image { grid-area: image; } .bonus_qr .bonus_qr_header .image img { width: 100%; } .bonus_qr .bonus_qr_header .title { grid-area: title; text-align: center; background: #00b5e2; padding: 15px; color: #fff; } .bonus_qr .bonus_qr_header .title img { width: 100px; border: 8px solid #fff; border-radius: 10px; margin-bottom: 6px; } .bonus_qr .bonus_qr_header .subtitle { grid-area: subtitle; background: #f1f1f1; } .bonus_qr .qr_container { margin-top: 30px; } .bonus_qr .qr_container::after { content: ''; display: block; width: 80%; height: 30px; margin: 0 10%; border-bottom: 1px solid #f1f1f1; } .bonus_qr .qr_container .question { display: flex; align-items: center; gap: 10px; } .bonus_qr .qr_container .question img { height: 46px; margin-top: -6px; } .bonus_qr .qr_container .response { padding-top: 15px; } .bonus_qr .qr_container .response ul { list-style-type: square; margin-left: 30px; line-height: 20px; } @media (max-width: 768px) { .bonus_qr .bonus_qr_header { display: grid; grid-template-columns: 100%; grid-template-rows: 120px auto auto; grid-auto-flow: column; grid-template-areas: "image" "title" "subtitle"; margin: 15px 0; border-radius: 16px; overflow: hidden; } .bonus_qr .bonus_qr_header .image { overflow: hidden; } .bonus_qr .bonus_qr_header .image img { position: relative; width: 100%; top: -44px; } .bonus_qr .bonus_qr_header h2 { font-size: 13px; margin-top: 6px; } .bonus_qr .bonus_qr_header .subtitle { font-size: 14px; } .bonus_qr .question h2 { font-size: 14px; } }