/*Ecran*/ @media screen and (min-width: 992px) { :root { --taille: 10vw; } /*PARTIE FORMES*/ .containform3 { position: relative; height: var(--x); width: var(--x); display: table-cell; vertical-align: middle; } .containinte { /*PROBLEME SIZE*/ top: calc((var(--y) - var(--z)) / 2); left: calc((var(--y) - var(--z)) / 2); height: var(--z); width: var(--z); z-index: 2; position: absolute; } .cache { top: calc((var(--x) - var(--y)) / 2.8); left: calc((var(--x) - var(--y)) / 2.2); height: calc(var(--y)*1.05); width: calc(var(--y)*1.05); z-index: 2; position: absolute; z-index: 15; } #choosemode { height: 4vw; width: 16vw; position: absolute; left: 42vw; top: 50vh; z-index: 15; } #choosedimension { height: 4vw; width: 16vw; position: absolute; left: 42vw; top: 55vh; z-index: 15; } #conteneurmode { width: 80%; height: 2vw; left: 10%; top: 25%; position: absolute; margin: 0 auto; background-color: var(--lightsedonca); border-radius: 5vw; } #triangleprec { width: 0; height: 0; margin: 0.25vw auto 0 auto; border-top: 0.75vw solid transparent; border-right: 1.25vw solid grey; border-bottom: 0.75vw solid transparent; } #trianglesuiv { width: 0; height: 0; margin: 0.25vw auto 0 auto; border-top: 0.75vw solid transparent; border-left: 1.25vw solid grey; border-bottom: 0.75vw solid transparent; } #textmode { font-family: Lucida Console, Arial Black, Arial; font-size: 1vw; color: #707070; text-align: center; margin: 5% auto 0 auto; } #textdimension { font-family: Lucida Console, Arial Black, Arial; font-size: 1vw; color: #707070; text-align: center; margin: 5% auto 0 auto; } #formSize { margin: 0 auto; width: 100%; height: 3vw; } .slider-container .bar .fill { display: block; width: 50%; height: 100%; background-color: #6200ee; } .slider-container .slider { position: relative; z-index: 2; -webkit-appearance: none; width: 100%; height: 10px; border-radius: 5px; outline: none; background-color: transparent; } .slider.container { position: relative; } .slider-container .bar { position: absolute; z-index: 1; left: 0; width: 100%; height: 10px; border-radius: 5px; background-color: #c6aee7; overflow: hidden; } /*Moz*/ .slider-container .slider::-moz-range-thumb { -webkit-appearance: none; width: 1vw; height: 1vw; background-color: #6200ee; border-radius: 1vw; cursor: pointer; outline: none; box-shadow: 0 0 0 0 rgba(98, 0,238, .1); transition: .3s ease-in-out; } .slider-container .slider::-moz-range-thumb:hover { box-shadow: 0 0 0 10px rgba(98,0,238,.1); } .slider-container .slider:active::-moz-range-thumb { box-shadow: 0 0 0 20px rgba(98,0,238,.2); } /*===========================================*/ .logoboutton { font-size: 2vw; color: var(--lightprima); margin: 0.25vw; } /*Externe*/ .bouttonMenuHaut { height: 4vw; width: 4vw; background-color: var(--lightsedonca); border-radius: 50%; margin: 0 auto; margin-top: 0.45vw; position: relative; display: block; } #affPoints { text-align: center; font-family: Montserrat, impact, Arial Black; font-size: 2vw; margin-top: 1.2vw; color: var(--lightsedonca); } .divmenu { width: 10vw; height: inherit; margin-right: 1vw; } .containButtonForm { height: 2.5vw; width: 2.5vw; margin: 0.75vw; position: absolute; } .buttonretour { position: relative; height: 4vh; width: 4vh; border-radius: 55vw; background-color: var(--lightsedonca); z-index: 5; margin-left: 2vw; top: 1.75vw; } .flex-item { background: var(--lightsedonca); width: var(--taille); border-radius: 0.75vw; padding-right: 0.15vw; padding-left: 0.15vw; padding-bottom: 0.25vw; list-style: none; display: flex; margin-right: 0.4vw; margin-left: 0.4vw; margin-bottom: 1vw; -webkit-flex-flow: row wrap; justify-content: space-around; } .item-form { width: 3vw; padding-left: 0.1vw; margin-top: 0.25vw; height: 3vw; border-radius: 10px; background-color: var(--lighttercia); } .containcards { overflow-x: auto; display: flex; flex-wrap: wrap; padding-top: 1vw; justify-content: center; } .logop2 img { width: 20vh; padding-top: 1vh; position: relative; } .txt { position: absolute; font-family: Arial Black; color: var(--lightprima); font-size: 1.5vw; left: 0.4vw; top: -1.6vh; } .logo img { position: absolute; width: 12vw; left: 44vw; top: 13%; z-index: 11; } .mounts img { position: absolute; height: 100%; width: 100%; pointer-events: none; margin-left: -10px; } #contourbuttonvalider { position: absolute; border-radius: 45px; left: 9.2vw; top: 3.5vw; height: 4vw; width: 12vw; background-color: var(--lightsedonca); z-index: 15; } .bouttonvalider { position: absolute; height: 3.4vw; width: 11.4vw; top: 0.3vw; left: 0.3vw; border-radius: 30px; } .violet { background-color: #B130DE; } .vert { background-color: #00CC66; } #textjouer { font-family: Montserrat, impact, Arial Black; position: absolute; font-size: 2.5vw; margin-top: 0.2vw; color: var(--lightsedonca); text-align: center; width: inherit; } }