CSS_PC{} Settings{} Font-Settings{} @font-face{ font-family:'UniversCn'; font-weight: bold; src:url(assets/Font/Univers-LT-Std-67-Bold-Condensed_46347.ttf); } body{ margin: 0; padding: 0; } p, a{ font-size: 15px; font-family: arial,sans-serif; } h1{ font-size: 20px; font-family: UniversCn,sans-serif; color: #363636; } h3{ font-size: 18px; font-family: UniversCn,sans-serif; } #page{ position:relative; max-width: 1250px; margin: auto; } Div-Contact{} #Contact-Container{ padding-bottom: 40px; } #Contact-Container p{ color: #6a6c6e; font: normal 15px Arial; text-align: center; } .Contact{ margin: auto; width: 449px; text-align: center; border-bottom: 2px solid #363636; font: bold 2ch Arial; color: #363636; } #target{ width:170px; margin: auto; } .Button-Contact{ width: 130px; margin: auto; padding: 5px 0px; text-align: center; border: 2px solid #363636; background-color: #FFF; transition: all 0.7s ease; font: bold 1.3ch Arial; color: #363636; } .button3{ width: 170px; margin: auto; } .Button-Contact:hover{ background-color: #363636; color: #FFF; } a{ text-decoration: none; } Atom{} .container-atom { width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; position: fixed; background-color: #404040; z-index: 99999; } .system{ width: 300px; height: 300px; top: 0; left: 0; right: 0; bottom: 0; position: absolute; margin: auto; animation: spin 30s linear infinite; -webkit-animation: spin 30s linear infinite; } .nuke{ width: 20px; height: 20px; border-radius: 50%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; background-color: #404040; box-shadow: 0 0 10px rgb(81, 203, 238), 0 0 50px rgb(81, 203, 238); border: 0.5px solid rgba(81, 203, 238, 1); } .ellipse { width: 100px; height: 100px; border-radius: 50%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; border: 2px #555 solid; transform-style: preserve-3d; } .ellipse .circle { width: 5px; height: 5px; border-radius: 50%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; background: #404040; border: 1px solid #F60; box-shadow: 0 0 10px #F60, 0 0 50px #F60; animation: move linear infinite; } .ellipse:nth-child(1) { transform: rotateZ(60deg) rotateY(70deg); } .ellipse:nth-child(1) .circle { animation-duration: .5s; } .ellipse:nth-child(2) { transform: rotateZ(120deg) rotateY(70deg); } .ellipse:nth-child(2) .circle { animation-duration: 0.55s; } .ellipse:nth-child(3) { transform: rotateZ(180deg) rotateY(70deg); } .ellipse:nth-child(3) .circle { animation-duration: 0.60s; } @keyframes move { from { transform: rotateZ(0) translateX(50px) rotateZ(0) rotateY(-70deg); } to { transform: rotateZ(360deg) translateX(50px) rotateZ(-360deg) rotateY(-70deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } En-tete{} Logo{} #header{ margin: 0; padding: 0; display: fixed; } #Top-Header{ height:100px; width:100%; color:#fff; display: block; } #logo{ width: 30%; float: left; } #subtitle{ float: right; width: 20%; height: 100px; position: relative; } .subtitle{ position: absolute; bottom: 5px; right: 0; font-size: 15px; font-weight: bold; letter-spacing: 3px; color: #363636; text-decoration: none; } .subtitle:hover{ color: #F60; } #nav-container{ width:100%; } .identification-container-STD{ position: absolute; top: 145px; right: 0px; width: 0px; height: auto; background: #363636; z-index: 1; border-radius: 5px; text-align: center; padding: 0px; transition: all 0.3s ease !important; overflow: hidden; } Navigation{} nav{ width: 100%; height: 50px; background-color: #363636; text-align:center; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5); } nav ul { padding: 0; margin: 0; height: 50px; } nav ul li{ text-align: center; display:inline-block; list-style: none; position: relative; width: 18%; } nav ul li a{ display: block; transition: 0.3s ease; font-family: UniversCn,sans-serif; color: rgb(204, 204, 204); font-size: 20px; font-weight: 700; padding: 10px 10%; text-transform: uppercase; text-decoration: none; border-top: 4px solid transparent; vertical-align: middle; } nav ul li:hover > a{ color: #fff; border-color: #fff; border-top: 4px solid #f60; margin: 0; } nav ul li ul{ display: none; position: absolute; padding: 5px; background-color: #363636; border-radius: 0px 0px 6px 6px; height: auto; } nav ul li:hover ul{ display: block; z-index: 9999; } nav ul li ul li{ width: 300px; text-align: left; } nav ul li ul li a{ padding: 4px 14px; color: #f60; font-size: 17px; font-weight: 300; text-transform: none; letter-spacing: 0px; } nav ul li ul li a:hover{ color: rgb(204, 204, 204); transition: 0.3s ease; border-top: 4px solid transparent; border-left: 4px solid rgb(204, 204, 204); z-index: 100; } .login{ position: absolute; height: 30px; width: 30px; top: 110px; right: 20px; background-color: #FFF; transition: all 0.3s ease; } .login:hover{ background-color: #F60; } .login img{ height: 30px; width: 30px; } .amount-container{ position: relative; height: 11px; font-size: 10px; color: rgb(204, 204, 204); top: 5px; right: 3px; transition: all 0.3s ease; z-index: 1; } .cart-container{ position: relative; width: 30px; height: 30px; top: -2px; right: 0px; background-color: rgb(204, 204, 204); transition: all 0.3s ease; cursor: pointer; } .shop-position:hover > .cart-container{ background-color: #FFF; } .shop-position:hover > .amount-container{ color: #F60; font-weight: bold; } .cart-container img{ width: 100%; } Langue{} .Language-menu{ display: block; position: absolute; top: 0; right: 0; height: 35px; width: 550px; overflow: hidden; transition: all 0.4s ease; } .Language-button{ position: absolute; top: 0; right: 0; display: grid; grid-template-columns: 50px 30px } .alpha{ background-color: #363636; transition: all 0.3s ease; } .Language-button img{ width: 50px; } #Language-selected{ justify-self: center; align-self: center; font: bold 17px Arial; text-decoration: underline; color: #363636; transition: all 0.3s ease; } .langue{ transition: all 0.7s ease; white-space: nowrap; font: bold 13px Arial; color: #363636; line-height: 30px; text-decoration: none; opacity: 0; } .langue a{ color: #363636; transition: all 0.6s ease; } #french{ position: absolute; top: -30px; left: 0%; transition-delay: 0.3s; } #german{ position: absolute; top: -30px; left: 22%; transition-delay: 0.4s; } #italian{ position: absolute; top: -30px; left: 44%; transition-delay: 0.5s; } #English{ position: absolute; top: -30px; left: 66%; transition-delay: 0.6s; } .Language-button:hover{ cursor: pointer!important; } .Language-button:hover #Language-selected{ cursor: pointer!important; color: #F60!important; } .Language-button:hover .alpha{ background-color: #F60!important; } .langue:hover a{ text-decoration: underline; text-decoration-color: #F60; } Watson{} .watson-wrapper{ min-height: 758px; display: flex; overflow: hidden; } .frontWatson{ position: relative; display: grid; width: 100%; grid-gap: 10px; grid-template-columns: 1fr 1fr; text-align: center; justify-items: center; padding: 5px; transition: all 1s ease 0s; } #watsonFront1{ grid-column: 1/3; } #watsonFront2{ grid-column: 1/3; } .watson-button{ width: 120px; height: 40px; margin: 0 2vh; } #watsonFrontContainer{ padding: 10px; left: 0px; grid-column: 1/3; width: 100%; min-height: 10px; border-bottom: 2px solid #363636; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 10px; text-align: center; justify-items: center; padding-bottom: 20px; transition: all 0.3s ease 0s; overflow: hidden; } .watson-canvas{ border: 2px solid #363636; border-radius: 5px; overflow: hidden; width: 150px; height: 162px; transition: all 0.25s ease 0s; } .watson-canvas:hover{ box-shadow: 0px 5px 10px 5px rgb(0 0 0 / 50%); } .canvasIMG{ height: 120px; background-position: center; background-size: cover; } .canvasStatus{ height: 8px; background-color: #363636; border-top: 2px solid #363636; border-bottom: 2px solid #363636; } .canvasName{ height: 30px; width: 150px; display: table-cell; vertical-align: middle; font-size: 15px; font-family: UniversCn,sans-serif; } #watsonNewCollection{ position: relative; left: calc(100% + 5px); display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr; text-align: center; justify-items: center; padding: 5px; width:0px; transition: all 0.3s ease 0s; overflow: hidden; } #newCollectionForm{ grid-column: 1/3; min-height: 10px; border-bottom: 2px solid #363636; padding-bottom: 20px; } #seeCollection{ position: relative; display: grid; left: calc(-100% - 5px); grid-template-columns: repeat(2, 1fr); grid-gap: 10px; grid-auto-rows: max-content; text-align: center; justify-items: center; padding: 20px 5px; width:0px; transition: all 0.3s ease 0s; overflow: hidden; } #collection_header{ grid-column: 1/3; } #div_newSampleForm{ grid-column: 1/3; grid-row: 2/3; max-height: 0px; overflow: hidden; } #btn_Sample-form{ width: 130px; margin: 20px auto; padding: 5px 0px; text-align: center; border: 2px solid #363636; background-color: #FFF; transition: all 0.7s ease; font: bold 1.3ch Arial; color: #363636; } #btn_Sample-form:hover{ background-color: #363636; color: #FFF; cursor: pointer; } #read-thumbnail{ background-position: center; background-size: cover; grid-row: 3/4; grid-column: 1/2; width: 100%; height: 100%; position: relative; border-radius: 10px; } #Canvas-Collection{ grid-row: 3/4; grid-column: 2/3; display: grid; grid-gap: 60px; grid-template-columns: 1fr; text-align: left; justify-items: center; padding: 20px 5px; height: fit-content; width: fit-content; transition: all 0.3s ease 0s; } #Canvas-Collection > div{ width: 100%; } .from-control{ margin: 5px 0px; } .from-control label{ position: relative; /* top: -50px; */ top: -15px; right: 305px; font-size: 10px; outline: none; transition: 0.1s ease-in; } .from-control input{ border: 0; border-bottom: 2px solid #333; outline: none; color: #F60; width: 300px; font-size: 15px; transition: 0.1s ease-in; } .from-control input:focus + label{ color: #F60; } .from-control input:focus{ color: #363636; border-bottom: 2px solid #F60; } #container_Sample{ grid-column: 1/3; width: 100%; } .sample_grid{ display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; grid-gap: 5px 0px; font-family: system-ui; } .sample_Type{ grid-column: 1/7; padding: 10px; font-weight: bold; font-size: 18px; color: rgb(36,36,36); font-family: UniversCn,sans-serif; border-bottom: 2px solid rgb(36,36,36); } .sample_header{ font-weight: bold; font-size: 15px; color: rgb(36,36,36); font-family: UniversCn,sans-serif; } #Sample_link{ margin: auto; } #Sample_img{ background-position: center; background-size: cover; width: 50px; height: 50px; border-radius: 10px; border: 2px solid rgb(36,36,36); } SGS LabTox {} Homepage{} Front-end{} .container-content{ position: relative; max-height: 700px; height: 55.8vw; } #Slider1{ position: absolute; overflow: hidden; padding: 0; border: 0; max-height: 700px; z-index: -1; border-radius: 0px; margin-bottom: 30px; } #Slider1 ol{ display: none; } #Contents{ position: absolute; bottom: 0; right: 0; width: auto; height: auto; background-color: rgba(255,255,255,0.7); padding: 0px 15px 15px 15px; text-align: justify; z-index: 200; max-height: 470px; max-width: 72%; overflow-y: hidden; } .front-grid{ display: grid; grid-template-columns: 0.7fr 1fr; } .title-front-grid{ justify-self: center; font-weight: bold; color: #202020; font-family: UniversCn,sans-serif; } .text-front-grid{ border-right : #606060 2px solid; } .front-grid p{ margin : 6px; } .container-content:after { position: /* content: ""; display: block; clear: both; */ } #wrapper{ width:170px; margin: auto; } #button-homepage{ width: 170px; margin: auto; padding: 5px 0px; text-align: center; border: 2px solid #F60; background-color: rgba(255,255,255,0.4); transition: all 0.7s ease; font: bold 1.2ch Arial; color: #F60; } .button2{ width: 170px; margin: auto; } #button-homepage:hover{ background-color: #F60; color: #FFF; } Offre{} #Offer{ position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 60px auto; grid-column-gap: 1px; border-top: 1px solid #e6e6e6; } #Offer-title{ grid-column: 1/5; grid-row: 1/2; justify-self: center; align-self: center; } .toparrow::before{ content: ' '; width: 0; height: 0; border: 12px solid #fff; position: absolute; z-index: 3; opacity: 1; border-color: transparent transparent #fff transparent; top: -20px; right: calc(50% - 10px); margin-left: -10px; } #Materiaux{ grid-column: 1/2; grid-row: 2/3; grid-template-rows: auto 45px; } #Air{ grid-column: 2/3; grid-row: 2/3; grid-template-rows: auto 45px; } #PCB{ grid-column: 3/4; grid-row: 2/3; grid-template-rows: auto 45px; } #Autre{ grid-column: 4/5; grid-row: 2/3; grid-template-rows: auto 45px; } .offer-box{ /* overflow: hidden; border-radius: 4px; */ } .Offer-title{ line-height: 60px; font-family: UniversCn,sans-serif; } .offer-img{ background-color: black; } .offer-img img { height: 250px; opacity: 0.75; filter: alpha(opacity=75); /* For IE8 and earlier */ transition: 0.5s ease; } .offer-text { position: relative; background-color: #FFF; border-right: 1px solid grey; border-bottom: 1px solid grey; border-left: 1px solid grey; /* border-radius: 0px 0px 4px 4px; */ } .offer-text a{ text-decoration: none; } .offer-text h3{ color: #494949; padding: 5px 0px; margin: 0; font-size: 17px; font-weight: bold; font-family: UniversCn,sans-serif; text-align: center; text-decoration: none; letter-spacing: 1px; transition: 0.5s ease; } .offer-box:hover .offer-img img{ opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } .offer-box:hover .offer-text h3{ color: #F60; } .offer-box:hover .offer-text{ border-right: 1px solid #F60; border-bottom: 1px solid #F60; border-left: 1px solid #F60; } Accreditation{} #References{ border-top: 1px solid #e6e6e6; position: relative; height: auto; display: block; padding-top: 0; margin: 30px 0px; } #text-accreditation{ margin: auto; width: 50%; padding: 0px 16px; font-size: 15px; font-family: arial,sans-serif; color: #363636; text-align: justify; box-sizing: border-box; float: left; vertical-align:top; } #img-trust { margin: auto; padding-top: 0; width: 50%; box-sizing: border-box; float: right; vertical-align:top; } #accred-logo{ text-align: center; } #References:after{ box-sizing: border-box; content: ""; display: table; clear: both; } Collaborateur{} #Title-Team{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #team-table { display: grid; grid-template-columns: 350px 350px; grid-gap: 0px; width: 740px; text-align: center; margin: auto; grid-gap: 5px 40px; margin: 20px auto 20px auto ; } .team-name { height: 225px; font: 15px Arial; border-bottom: 1px solid #e6e6e6; position: relative; } .team-photo{ border-radius: 5px 5px 5px 5px; height: 225px; overflow: hidden; } .text-team{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; color: rgb(106, 108, 110); } Conditions Générales{} #title-CG{ width: 70%; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #title-CG h1{ margin-bottom: 2px; } #text-CG{ text-align: justify; padding: 30px; column-count: 2; column-gap: 40px; color: #6a6c6e; } #CG-p{ color: #363636; } .container-link-cg{ width: 250px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 40px; } .link-cg { width: 250px; margin: auto; } .CG-PDF{ font-weight: bold; text-align: center; padding: 4px; border: 2px solid #F60; width: 250px; color: #F60; transition: all 0.7s ease; } .CG-PDF:hover{ background-color: #F60; color: #FFF; } Accreditations{} #Title-accreditation{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #accred-table{ padding: 30px; text-align: justify; color: #6a6c6e; display: grid; grid-template-columns: 60% 40%; grid-template-rows: 1fr 1fr 1fr; grid-row-gap: 10px; } .text-accred{ grid-column: 1/2; } .link-accred{ grid-column: 2/3; } .link-accred{ height: 100%; justify-self: center; align-self: center; background-color: #FFF; } #SAS-img{ margin: 14px; height: 100%; max-height: 230px; max-width: 230px; background-color: #363636; transition: all 0.4s ease; } #SAS-img:hover{ background-color: #F60; } Prestations{} Prestations{} #Title-Prestation{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid{ display: grid; padding: 300px 20px 20px 20px; margin: 30px 0px; grid-template-columns: repeat(6, 1fr); background-color: #404040; grid-gap: 20px; grid-template-rows: auto 150px 150px 150px 150px 150px 150px ; background-image: linear-gradient(to top, #111 75%, rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0)), url("https://labtox.ch/assets/Images/Photo_Exterieur/sunset_riviera.jpg"); background-repeat: no-repeat; }/*avant #111 c'était #404040*/ .form-contact{ height: 490px; max-height: 0px; grid-column: 1/7; grid-row: 1/2; grid-row: 2px; transition: all 1s ease; overflow: hidden; } .btn-catalogue { min-width: 390px; position: absolute; margin: 0 auto; top: 150px; left: calc(50% - 195px); text-align: center; border : solid 2px #F60; font: bold 20px univers; font-family: UniversCn,sans-serif; border-radius: 10px; color: #F60; transition: all 0.5s ease; padding: 5px; } .a-catalogue { display: block; color: #F60; text-transform: uppercase; text-decoration: none; font-family: sans-serif; font-weight : bold; width: 78%; position: relative; z-index: 10; background: rgba(255,255,255,0); margin: 8px 11%; transition: all 0.3s ease; } .btn-catalogue:hover { background: #FFF; } .span-catalogue { display: block; padding: 8px 30px; position: relative; z-index: 10; background: inherit; text-align: center; } .box{ border-radius:6px; display: grid; overflow: hidden; } #box1{ grid-column: 1/4; grid-row: 2/4; grid-template-columns: 1.5fr 2fr; grid-template-rows: 1fr; } #box2{ grid-column: 4/7; grid-row: 2/4; grid-template-columns: 2fr 1.5fr; grid-template-rows: 1fr; } #box3{ grid-column: 1/4; grid-row: 4/6; grid-template-columns: 1.5fr 2fr; grid-template-rows: 1fr; } #box4{ grid-column: 4/7; grid-row: 4/6; grid-template-columns: 2fr 1.5fr; grid-template-rows: 1fr; } #box5{ grid-column: 1/4; grid-row: 6/8; grid-template-columns: 1.5fr 2fr; } #box6{ grid-column: 4/7; grid-row: 6/8; grid-template-columns: 2fr 1.5fr; grid-template-rows: 1fr; } */ .Sub-box-img{ background-color: black; opacity: 0.75; filter: alpha(opacity=75); /* For IE8 and earlier */ transition: all 0.7s ease; } .Sub-box-img > img{ border: 0px solid transparent; } .Sub-box-text{ position: relative; background-color: #FFF; padding: 15px; margin: 0; word-wrap: break-word; height: calc(100% - 30px); } .leftarrow::before{ content: ' '; width: 0; height: 0; border: 10px solid #fff; position: absolute; z-index: 3; opacity: 1; border-color: transparent #fff transparent transparent; top: calc(50% - 10px); left: -10px; margin-left: -10px; } .rightarrow::before{ content: ' '; width: 0; height: 0; border: 10px solid #fff; position: absolute; z-index: 3; opacity: 1; border-color: transparent transparent transparent #fff; top: calc(50% - 10px); right: -20px; margin-left: -10px; } .Sub-box-text h3{ text-transform: uppercase; } .Sub-box-text h3, .box a{ background-color: #FFF; text-align: center; color: #333333; padding: 0; margin: 0; max-height: inherit; transition: 0.7s ease; } .Sub-box-text p{ position: relative; color: #6a6c6e; font: normal 15px Arial; text-align: left ; transition: all 0.7s ease; } .Sub-box-text blockquote{ margin: 0; } .box:hover h3{ color: #F60; } .box:hover p{ color: Black; } .box:hover .Sub-box-img{ opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } Analyse amiante dans les materiaux{} #Title-AnalyseAmianteMAT{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid-Mat{ display: grid; padding: 20px 20px 20px 20px; margin: auto; max-width: 900px; min-width: 700px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 0px; grid-auto-rows: minmax(150px, auto) ; } .box-MAT{ box-sizing: border-box; border-color: red; text-align: left ; overflow: hidden; } .box-MAT p{ color: #6a6c6e; font: normal 15px Arial; text-align: left ; margin: 0; } #MAT1{ position: relative; overflow: hidden; grid-column: 1/3; border-radius: 5px; } #MAT1 #Slider1, #MAT1 #Slider1 .slides, #MAT1 #Slider1 .slides li, #MAT1 #Slider1 .slides li img{ overflow: hidden; margin: 0; padding: 0; border: 0; max-height: 300px; } #MAT2 { justify-self: center; align-self: center; position: relative; opacity: 0.9; overflow: visible; } #MAT2 img{ width: 100%; } #Documents { position: relative; } #Documents { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; justify-self: stretch; align-self: stretch; transition: .7s ease; background-color: #FFF; overflow: visible; } #Documents p { color: #6a6c6e; position: absolute; top: 34%; left: 14%; white-space: nowrap; } #Documents a { color: #F60; font-weight: bold; } #MAT3{ grid-column: 1/3; padding: 20px 0px; } #MAT4{ padding: 20px 0; justify-self: center; } #MAT2:hover #Documents{ opacity: 1; } .minus-btn{ width:30px; } #Qty{ width:60px; text-align: center; } .Qty-container{ text-align: center; margin-top: 30px; padding: 15px; } .plus-btn{ width:30px; } .total-price{ height: 40px; text-align: center; color: #6a6c6e; font: normal 1.6ch Arial; transition: all 0.7s ease; } .Qty-submit{ margin: auto; text-align: center; } #button-Qty{ font-size: 12px; } Analyse amiante dans lair{} #Title-AnalyseAmianteVDI{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid-VDI{ display: grid; padding: 20px 20px 20px 20px; margin: auto; max-width: 900px; min-width: 700px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 0px; grid-auto-rows: minmax(150px, auto) ; } .box-VDI{ box-sizing: border-box; border-color: red; text-align: left ; overflow: hidden; } .box-VDI p{ color: #6a6c6e; font: normal 15px Arial; text-align: left ; margin: 0; } #VDI1{ position: relative; overflow: hidden; grid-column: 1/3; border-radius: 5px; } #VDI1 #Slider1, #VDI1 #Slider1 .slides, #VDI1 #Slider1 .slides li, #VDI1 #Slider1 .slides li img{ overflow: hidden; margin: 0; padding: 0; border: 0; max-height: 300px; } #VDI2 { justify-self: center; align-self: center; position: relative; opacity: 0.9; overflow: visible; } #VDI2 img{ width: 100%; } #VDI3{ grid-column: 1/3; padding: 20px 0px; } #VDI4{ padding: 20px 0; justify-self: center; } #VDI2:hover #Documents{ opacity: 1; } .container-pompe{ margin-bottom: 30px; } #Grid-Pompe{ display: grid; padding: 20px 20px 20px 20px; margin: auto; max-width: 900px; min-width: 700px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, auto); grid-gap: 0px; grid-auto-rows: minmax(150px, auto) ; } .Pompe{ color: #6a6c6e; font: normal 1.6ch Arial; text-align: justify ; margin: 0; grid-column: 1/3; } .Pompe-tarification{ color: #6a6c6e; font: normal 1.6ch Arial; padding: 20px 0; justify-self: center; text-align: center; } Analyse PCB{} #Title-AnalyseAmiantePCB{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid-PCB{ display: grid; padding: 20px 20px 20px 20px; margin: auto; max-width: 900px; min-width: 700px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 0px; grid-auto-rows: minmax(150px, auto) ; } .box-PCB{ box-sizing: border-box; border-color: red; text-align: left ; overflow: hidden; } .box-PCB p{ color: #6a6c6e; font: normal 15px Arial; text-align: left ; margin: 0; } #PCB1{ position: relative; overflow: hidden; grid-column: 1/3; border-radius: 5px; } #PCB1 #Slider1, #PCB1 #Slider1 .slides, #PCB1 #Slider1 .slides li, #PCB1 #Slider1 .slides li img{ overflow: hidden; margin: 0; padding: 0; border: 0; max-height: 300px; } #PCB2 { justify-self: center; align-self: center; position: relative; opacity: 0.9; overflow: visible; } #PCB2 img{ width: 100%; } #PCB3{ grid-column: 1/3; padding: 20px 0px; } #PCB4{ padding: 20px 0; justify-self: center; } #PCB2:hover #Documents{ opacity: 1; } Analyse HAP{} #Title-AnalyseAmianteHAP{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid-HAP{ display: grid; padding: 20px 20px 20px 20px; margin: auto; max-width: 900px; min-width: 700px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 0px; grid-auto-rows: minmax(150px, auto) ; } .box-HAP{ box-sizing: border-box; border-color: red; text-align: left ; overflow: hidden; } .box-HAP p{ color: #6a6c6e; font: normal 15px Arial; text-align: left ; margin: 0; } #HAP1{ position: relative; overflow: hidden; grid-column: 1/3; border-radius: 5px; } #HAP1 #Slider1, #HAP1 #Slider1 .slides, #HAP1 #Slider1 .slides li, #HAP1 #Slider1 .slides li img{ overflow: hidden; margin: 0; padding: 0; border: 0; max-height: 300px; } #HAP2 { justify-self: center; align-self: center; position: relative; opacity: 0.9; overflow: visible; } #HAP2 img{ width: 100%; } #HAP3{ grid-column: 1/3; padding: 20px 0px; } #HAP4{ padding: 20px 0; justify-self: center; } #HAP2:hover #Documents{ opacity: 1; } Analyse Plomb{} #Title-AnalyseAmiantePlomb{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid-Plomb{ display: grid; padding: 20px 20px 20px 20px; margin: auto; max-width: 900px; min-width: 700px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 0px; grid-auto-rows: minmax(150px, auto) ; } .box-Plomb{ box-sizing: border-box; border-color: red; text-align: left ; overflow: hidden; } .box-Plomb p{ color: #6a6c6e; font: normal 15px Arial; text-align: left ; margin: 0; } #Plomb1{ position: relative; overflow: hidden; grid-column: 1/3; border-radius: 5px; } #Plomb1 #Slider1, #Plomb1 #Slider1 .slides, #Plomb1 #Slider1 .slides li, #Plomb1 #Slider1 .slides li img{ overflow: hidden; margin: 0; padding: 0; border: 0; max-height: 300px; } #Plomb2 { justify-self: center; align-self: center; position: relative; opacity: 0.9; overflow: visible; } #Plomb2 img{ width: 100%; } #Plomb3{ grid-column: 1/3; padding: 20px 0px; } #Plomb4{ padding: 20px 0; color: #6a6c6e; font: normal 15px Arial; } #Plomb-grid{ display: grid; grid-template-columns: 1fr 1fr; text-align: center; } #Plombsubtitle{ grid-column: 1/3; justify-self: center; margin-bottom: 10px; } #Plomb2:hover #Documents{ opacity: 1; } Analyse Poussiere{} #Title-AnalyseAmiantePoussiere{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid-Poussiere{ display: grid; padding: 20px 20px 20px 20px; margin: auto; max-width: 900px; min-width: 700px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-gap: 0px; grid-auto-rows: minmax(150px, auto) ; } .box-Poussiere{ box-sizing: border-box; border-color: red; text-align: left ; overflow: hidden; } .box-Poussiere p{ color: #6a6c6e; font: normal 15px Arial; text-align: left ; margin: 0; } #Poussiere1{ position: relative; overflow: hidden; grid-column: 1/3; border-radius: 5px; } #Poussiere1 #Slider1, #Poussiere1 #Slider1 .slides, #Poussiere1 #Slider1 .slides li, #Poussiere1 #Slider1 .slides li img{ overflow: hidden; margin: 0; padding: 0; border: 0; max-height: 300px; } #Poussiere2 { justify-self: center; align-self: center; position: relative; opacity: 0.9; overflow: visible; } #Poussiere2 img{ width: 100%; } #Poussiere3{ grid-column: 1/3; padding: 20px 0px; } #Poussiere4{ padding: 20px 0; justify-self: center; } #Poussiere2:hover #Documents{ opacity: 1; } Contact{} Nos Coordonnées{} #Title-Contact{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #Grid-contact{ display: grid; padding: 20px 20px 20px 20px; margin: 30px 0px; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; grid-template-rows: 0.5fr 1px 200px 200px; color: #6a6c6e; grid-row-gap: 5px; } #GENEVE{ grid-column: 1/6; grid-row: 2/3; border-bottom: 2px solid #363636; } #Canton-BE{ font: bold 2.2ch Arial; color: #F60; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0), #FFF 96%), url("https://labtox.ch/assets/Images/Carte/MapBienne.png"); width:100%; height:100%; background-size: cover; background-repeat: no-repeat; background-position: center center; text-align: right; line-height: 200px; border-radius: 5px 0 0 5px; } #Adress-BE{ font: bold 1.6ch Arial; } #Adress-GE{ font: bold 1.6ch Arial; } #Capability-BE{ display: grid; grid-template-columns: 1fr; grid-template-rows: 40px 40px 40px; text-align: left; line-height: 40px; vertical-align: middle; } #Capability-BE img{ width: 40px; height: 40px; text-align: left; vertical-align: middle; cursor: help; } #Canton-GE{ font: bold 2.2ch Arial; color: #F60; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0),rgba(255, 255, 255, 0.0), #FFF 96%), url("https://labtox.ch/assets/Images/Carte/MapGeneve.png"); width:100%; height:100%; background-size: cover; background-repeat: no-repeat; background-position: center center; text-align: right; line-height: 200px; border-radius: 5px 0 0 5px; } #Capability-GE{ display: grid; grid-template-columns: 1fr; grid-template-rows: 40px; text-align: left; line-height: 40px; vertical-align: middle; } #Capability-GE img{ width: 40px; height: 40px; text-align: left; vertical-align: middle; cursor: help; } .Grid-Title{ justify-self: center; align-self: center; } #Canton-Clipart{ height: 50px; width: 100px; } .Grid-Type, .Grid-Type a { text-align: center; align-self: center; justify-self: center; margin: 10px 0px; font: normal 1.7ch Arial; } .map-responsive{ border: none; margin: auto; width: 80%; height: 500px; } Formulaire de contact{} .form{ margin: 30px 30%; } #text{ height: 200px; } .class-form{ width: 100%; margin: 5px 0; font: 400 13.3333px Arial; } .form-buttons{ margin-top: 20px; text-align: center; } .error{ font: Arial; color: #F60; font-size: 14px; } input[type=submit] { background-color: #FFF; color: #F60; font-weight: bold; font-size: 14px; padding: 10px 16px; margin: 8px 0; border: 2px solid #F60; cursor: pointer; transition: ease 0.7s all; } input[type=submit]:hover { background-color: #F60; color: #FFF; } input[type=submit]:focus { outline: none; } Success{} .success{ width: 80%; text-align: center; text-transform: uppercase; font-weight: normal; margin: 20vh auto 0px auto; letter-spacing: 4px; min-height: calc(80vh - 211px); } FAQ{} #Title-FAQ{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } .faq-container{ padding: 30px 10%; min-height: calc(100vh - 155px - 46px - 61px - 55px); } .faq{ border-top: 1px solid #e6e6e6; margin-left: 30px; } .FAQ-theme{ font-size: 18px; font-weight: bold; font-family: UniversCn,sans-serif; color: #363636; margin: 20px 0px; } .faq_question { width: 100%; height: 30px; line-height: 30px; display: inline-block; cursor: pointer; font-weight: bold; font-size: 15px; font-family: UniversCn,sans-serif; color: #F60; box-sizing: border-box; } .faq_question img{ float: left; height: 20px; margin: 4.5px 10px; transform: rotate(90deg); transition: ease 0.5s all; } .faq_answer{ display: none; width: 100%; font-weight: bold; overflow: hidden; box-sizing: border-box; } .faq_answer p{ font-size: 13px; color: #6a6c6e; font-weight: bold; } .faq-reponse{ padding: 10px; } Recrut{} .recrut-container{ padding: 30px 10%; min-height: calc(100vh - 155px - 46px - 61px - 55px); } .recrut{ border-top: 1px solid #e6e6e6; margin-left: 30px; } #recrut-p{ font: normal 15px arial; color: #313131; } .recrut-theme{ font-size: 18px; font-weight: bold; font-family: UniversCn,sans-serif; color: #363636; margin: 20px 0px; } .recrut_question { width: 100%; height: 30px; line-height: 30px; display: inline-block; cursor: pointer; font-weight: bold; font-size: 15px; font-family: arial; color: #F60; box-sizing: border-box; } .recrut_question img{ float: left; height: 20px; margin: 4.5px 10px; transform: rotate(90deg); transition: ease 0.5s all; } .recrut_answer{ display: none; width: 100%; font-weight: bold; overflow: hidden; box-sizing: border-box; } .recrut_answer p{ font-size: 13px; color: #6a6c6e; font-weight: bold; } .recrut-reponse{ padding: 10px; } Search{} .sisea-paging{ display: none; } .sisea-result h3{ color: #F60; } .sisea-result h3 a{ color: #F60; font-size: 18px; } #search-menu{ width: 41%; height: 100px; text-align: center; display: inline-block; } #search-menu form{ margin: 0; padding: 40px 0px; } #search-menu fieldset{ border: none; } Cart{} #Title-Cart{ width: 70%; height: 25px; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } .cart-Grid{ display: grid; margin: 30px; grid-template-rows: 50px 1fr 1fr 1fr 1fr; } .entete-caneva{ display: grid; grid-template-columns: 60% 10% 10% 10% 10%; align-items: center; color: #FFF; background-color: #363636; font: normal 1.8ch Arial; font-weight: bold; text-align: center; padding: 15px; } .cart-caneva{ display: grid; grid-template-columns: 60% 10% 10% 10% 10%; color: #6a6c6e; font: normal 1.6ch Arial; border: 1px solid #363636; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 15px; align-items: center; } .prestation-cart{ position: relative; text-align: left; } .prestation-cart p{ margin-right: 125px; } .img-cart{ position: absolute; width: 100px; top: calc(50% - 50px); right: 25px; } .Unit-Cart, .Units, .Totale-Cart-mat, .Totale-Cart-vdi, .Totale-Cart-pcb, .symbol{ text-align: center; margin: 60px 10px; } #mat-input, #vdi-input, #pcb-input{ width: 50px; text-align: center; } .cart-sum-caneva{ margin-left: 35%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); color: #363636; font: bold 15px Arial; font-weight: bold; text-align: right; margin: 20px 30%; padding-top: 20px; border-top: 2px solid #363636; } .cart-sum{ text-align: left; } .miscellaneous{ grid-template-columns: 1fr 1fr 1fr; display: grid; text-align: center; } .info-bubble{ color: #6a6c6e; text-align: center; } .grid-info{ margin-top: 20px; border-top: 2px solid #363636; display: grid; grid-template-columns: 1fr 1fr; } .grid-info h3{ grid-column: 1/3; width: 70%; text-align: left; font-weight: normal; margin: 20px auto 50px auto; letter-spacing: 2px; } .invoice{ height: 16px; width: 16px; } .invoiceAdress{ grid-column: 1/3; max-height: 0px; overflow: hidden; transition: all 0.5s ease; } .communicationResults{ grid-column: 1/3; margin-left: 5%; margin-top: 20px; width: 40%; display: grid; grid-template-columns: 40% 60%; font: normal 12px Arial; } .communicationResults p{ color: #6a6c6e; margin: 0; } .grid-Results{ display: grid; grid-template-columns: 10% 90%; } .grid-Results p{ text-align: justify; margin: 0px; color: #6a6c6e; } .cart-form{ width: 80%; margin: 5px 10%; } .wrapInvoice{ display: grid; grid-template-columns: 10% 90%; transition: all 0.4s ease; } .wrapInvoice p{ text-align: justify; margin: 0px; color: #6a6c6e; } .grid-mat{ position: relative; display: grid; grid-template-columns: 75% 25%; margin-top: 20px; border-top: 2px solid #363636; max-height: 0px; overflow: hidden; transition: all 1s ease !important; } .grid-mat h3{ grid-column: 1/3; width: 70%; text-align: left; font-weight: normal; margin: 20px auto 20px auto; letter-spacing: 2px; } .input-wrap{ grid-column: 1/2; } .Form-Cart{ align-self: center; } .SampleName{ width: 80%; margin: 5px 10%; } .grid-vdi h3{ width: 70%; text-align: left; font-weight: normal; margin: 20px auto 20px auto; letter-spacing: 2px; } .grid-vdi{ position: relative; box-sizing: border-box; margin-top: 20px; border-top: 2px solid #363636; max-height: 0px; overflow: hidden; transition: all 1s ease !important; } .vdiReference { padding: 0 20px; display: grid; grid-template-columns: 5% 95%; } .vdiReference p{ margin: 0; color: #6a6c6e; } .sample-wrap-vdi{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 20px; padding: 20px; } .SampleVDI{ width: 100%; background-color: #313131; border-radius: 5px; text-align: center; padding: 5px; } #vdi-date{ margin-bottom: 20px; } .cart-form-vdi{ margin: 5px; width : 220px; } .Form-Cart-vdi{ text-align: center; } Pied de page{} #footer{ box-sizing: border-box; position: relative; width:100%; margin-top: 20px; margin-right: auto; margin-left: auto; border-top: 1px solid Black; bottom: 0; } #nav-footer { display: grid; min-height: 20px; max-height: 40px; grid-template-columns: repeat(6, 1fr); text-align: center; margin: 0% 10%; text-transform: uppercase; text-decoration: none; font-size: 15px; font-family: UniversCn,sans-serif; color: #F60; font-weight: bold; line-height: 20px; cursor: pointer; } .div-footer{ align-self: center; } #nav-footer a{ text-decoration: none; font-size: 15px; font-family: UniversCn,sans-serif; color: #F60; font-weight: bold; line-height: 20px; } #final { font-size: 15px; font-family: UniversCn,sans-serif; height: 20px; color: rgb(204, 204, 204); background-color: #262626; text-align: center; line-height: 20px; } Cookie policy{} #cookie-policy-title{ margin-bottom: 2px; font-size: 20px; font-family: UniversCn,sans-serif; color: #363636; width: 70%; text-align: left; text-transform: uppercase; font-weight: normal; margin: 20px auto 0px auto; letter-spacing: 2px; border-bottom: 1px solid #F60; } #cookie-policy-description{ font-size: 15px; font-family: arial,sans-serif; text-align: justify; color: #6a6c6e; } .ot-sdk-cookie-policy-group{ font-size: 20px; font-family: UniversCn,sans-serif; color: #363636; text-align: justify; } .ot-sdk-cookie-policy-group-desc{ font-size: 15px; font-family: arial,sans-serif; text-align: justify; color: #6a6c6e; }