@media screen and (max-width: 1650px){
	.tablematrice td{
		width:20px;
	}

	.null:before{
		content: "";
		display:block;
		height:30px;
		width:30px;
		background-size: 30px 30px;
		background-image: url(cross.svg);
		background-repeat: no-repeat;
		text-align: center;
	}	
}

@media screen and (max-width: 1360px){

	section#nos-offres{
		width: 100%;
	}
	nav a{
		font-size: 1.3rem;
	}
	.menu ul li a {   
		padding-left: 0px;
	}
	#logo{
		width:150px;
		margin-left:5px;
	}
	#logo h1{
		font-size:1.5rem;
	}
}

@media screen and (max-width: 1240px){

	header{
		padding-left: 2%;
		padding-right: 2%;
	}
	section#accueil{
		margin-top: 0vh;
	}

	#compte{
		width: 100%;
	}

	.product >div{
		flex-grow: 1;
	}
	nav a{
		font-size:1rem;
	}
	.menu ul li a {   
		padding-left: 0px;
	}
	.range-tablereadonlysnap{
		margin-left:15px;
	}
	
}

@media screen and (max-width: 960px){

	header nav{
		display: none!important;
	}

	#nav-icon {
		display: block;
	}

	section#accueil{
		width: 100%;
		padding: 0 60px;
		/*height:260vmin;*/
	}
	#nos-offres .card{
		width: 250px;
	}
	#nos-offres .card::before, #nos-offres .card::after{
		width: 270px;
	}

	.card--footer a.button {
		width: 150px;
	}

	.button:hover{
		padding-left: 35px;
		transition: 0.3s;
	}

	#connexion-container, #inscription-container{
		width: 90%;
		height: 135vmin;
	}

	#connexion, #inscription{
		margin-top: 150px;
	}

	.has-children:hover > .sous-menu { /*2*/
		display: flex;
    	flex-direction: column;
	}
	.has-children{
		display: flex;
		flex-direction: column;
		position: relative;
		float: left;
	}
	#menu .menu-main{
		flex-direction: column;
		width: 100%;
	}
	#menu ul.sous-menu{
		position: static;
		margin-top:0px;
	}
	.menu-main li a {
		/*background-color: #eb26266b;*/
	}
	.menu-main a {
		width: 100%;
	}
	#menu li ul {
		display: flex;
		min-width: 150px;
		flex-direction: column;
	}
	.menu ul li a:hover{
		text-decoration: underline;
		text-decoration-color: red;
	}
	.menu ul li a {
		padding-left: 5px;
	}
	ul.sous-menu{
		background-color: #7e7777a6;
	}
	ul li{
		border-bottom: 1px black solid;
	}
	
	.menu li:hover ul {
		display:none;
	}
  	.menu li ul {
	    position: static;
	  }
	  
	  span{
		font-size: 0.8rem;
	  }
	  ul.menu-main li a {
		font-size: 1.5rem;
	}
	ul.sous-menu li a{
		background-color: unset;
		font-size: 1.1rem;
	}
	li.lang a{
		background-color: unset;
		width: unset;
	}
	li.lang{
		margin-left: 50vmin;
	}
	.input-container input{
		width: 50%;
	}
	.button::before{
		content:'';
	
		width: 30px;
		height: 100%;
		
		position: absolute;
		top:0px;
		right: -2px;
	
		background: #CF0000;
		border: 2px solid #171717;
		border-radius: 50px;
	
		-webkit-transition: 0.5s;
	
		transition: 0.5s;
	}
	a.button{
		position: relative;
		height: 30px;
		padding: 10px 20px;
		padding-right: 30px;
		background: #434040;
		border-radius: 20px;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}

	footer, .foot_abs{
		margin-top: 15px;
		flex-direction: column;
		min-height: 60px;
		margin-top: 50px;
		position:relative !important;
	}
	#nos-offres-tableau{
		height:unset;
	}
	#nos-offres-tableau thead,#nos-offres-tableau tbody{
		font-size: 0.8rem;
	}
	#nos-offres-tableau td{
		/*font-size: 2.5vmin;*/
	}
	#nos-offres-tableau td span{
		font-size: 0.8rem;
	  }

	#nos-offres-tableau td {
		padding: 3px;
	}

	.legend-color{
		font-size: 0.4rem;
		font-weight: bold;
		text-align: center;
		margin-top: 5px;
		float: left;
		width: 100px;
		height: 100%;
	}

	.legend-color span{
		font-size:0.7rem;
	}
	.legend-color span.combo{
		font-size:0.7rem;
	}

	.notdisplaysmall{
		display:none;
	}
	.pt-handreadonly .title{
		font-size:0.8rem;
	}
	#main-container{
		height:unset;
	}

	#form-paypal img{
		width:70%;
	}

	#form-cb-payment{
		margin-left:unset;
		width:100%;
	}

}

@media screen and (max-height:700px){
	#main-container{
		height:unset;
	}
	#accueil{
		height: 100vh;
		margin-bottom: 50vmin;
	}
	#outil-container{
		height: 100vh;
	}
	.foot_abs{
		position:relative;
	}
	.container{
		height:100%;
	}
}
@media screen and (max-width: 800px){

	body{
		position: relative;
		width: 100%;
		height: auto;
	}

	section#accueil{
		flex-direction: column;
		margin-top: 2vh;
	}

	#accueil #whatis,#tools{
		margin-bottom: 100px;
		width:100%;
	}

	#logo{
		/*width:0;
		height:0;*/
		margin-left:auto;
		margin-right: auto;
	}
	#nos-offres{
		position: relative;
		flex-direction: column;
		margin-top: 200px;
	}

	#nos-offres .card{
		position: relative;
		width: 300px;
	}
	#offre-1{
		margin-bottom: 60px;
	}
	#offre-2{
		margin-bottom: 120px;
	}
	#offre-3{
		margin-bottom: 100px;
	}
	#nos-offres .card::before, #nos-offres .card::after{
		width: 320px;
	}
	#outil{
		width: 100%;
	}

	#connexion-container, #inscription-container{
		height:unset;
	}
	.card--footer a.button {
		width: 250px;
	}

	.button:hover{
		padding-left: 40px;
		transition: 0.3s;
	}

	#panier-container{
		width: 100%;
		padding: 0 30px;
		height: unset;
	}

	#panier .product--unit-price{
		flex-grow: 1;
	}

	#compte{
		flex-direction: column;
		align-items: center;
		min-height: 100px;
		margin-top: 50px;
	}

	#main-container{

		/*height: 100vh;*/
		height:unset;

    }
    section{
        padding-bottom: 0px;
        height: 100%;
    }
	
	#links{
		display: flex;
		flex-direction: column;
		
	}
	footer #links div {
		margin: 5px;
	}
	
	#outil-container{
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		position: relative;
		flex-basis: 100%;
		height: 100%;
	}
	.range-tablereadonlysnap{
		margin-left:2% !important;
	}

	.column .button-container .button-tools{
		padding:5px!important;
		font-size:0.9rem!important;
	}
	.pt-hand-namereadonly{
		font-size:0.7rem!important;
	}

	.p.ev{
		font-size:0.6rem!important;
		margin-top: 0px!important;
	}
	.input-group input{
		padding: 10px 25px !important;
	}
	table.icm thead td {
		font-size:1.4rem;
	}
	table.icm thead th {
		padding:1px;
	}
	table.icm tbody td {
		padding:1px;
	}
	.icm-payout{
		text-align: unset !important;
	}

	.pt-rangereadonly {
		max-width: 455px;
		width: 455px;
	}
	/*.pt-handreadonly{
		width: 35px!important;
    	height: 35px!important;
	}
	.range-tablereadonlysnap{
		width: 455px!important;
		margin-left: auto !important;
		margin-right: auto !important;
	}*/
}

@media screen and (max-width: 600px){
	.pt-rangereadonly {
		max-width: 350px;
		width: 350px;
	}
	.pt-handreadonly{
		width: 26px!important;
    	height: 26px!important;
	}
	.pt-hand-namereadonly{
		font-size:0.6rem!important;
		margin-top:-2px;
	}
	.pt-hand-nbreadonly .ev{
		font-size: 8px !important;
		font-weight: normal;
		margin-top: -4px!important;		
	}
	.range-tablereadonlysnap{
		width: 338px!important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.range-grid{
		justify-content:unset!important;
	}
	.notdisplaymobiledevice{
		display:none;
	}
}

@media screen and (max-width: 450px){
	span {
		font-size: 2.89vmin;
	}
	.input-container, .slidecontainer {
		margin: 0px 10px;
	}
	.input-container input {
		background: rgba(0, 0, 0, 0.3);
		border: 0px;
		/* color: #555; */
		color: white;
		/* padding: 5px; */
		text-align: right;
		border-radius: 5px;
	}
	.input-container input {
		width: 100%;
	}
	.tablematrice td {
		/* width: 43%; */
		font-size: 3vmin;
	}
	.null:before{
		content: "";
		display:block;
		height:25px;
		width:25px;
		background-size: 25px 25px;
		background-image: url(cross.svg);
		background-repeat: no-repeat;
		text-align: center;
	}	
	.pt-rangereadonly {
		max-width: 286px;
		width: 286px;
	}
	.pt-handreadonly{
		width: 22px!important;
    	height: 22px!important;
	}
	.range-tablereadonlysnap{
		width: 286px!important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.pt-handreadonly .title {
		font-size: 2.5vmin;
		font-weight: bold;
	}
	table.icm thead td {
		font-size: 4vmin;
	}
	div.show-range label{
		font-size: 2.7vmin;
	}
	.range-grid {
	    justify-content: space-around !important;
	}

}