/* TARIFS */


@media screen and (min-width:500px) and (max-width:999px){	


	.pricing-item{
		/*margin: 0px 15px 0px 15px;*/
		width: 85vw;
		margin: 0px auto;
	}
	.pricing {
	    padding: 60px 0px 70px 0px;
	    background-color: #000000;
	    color: #ffffff;
	}

	.pricing h1:nth-child(1) {
	    text-align: center;
	    margin-bottom: 40px;
	    font-size: 2.5rem;
	    /*color: #00ff00;*/
	    color: white;
	}
	.pricing h1 span{
		border-bottom: 5px solid #00ff00;
		border-radius: 10px;
	}

	.devis-modal span{
		transition: 0.2s;
		color: black;
	}
	.devis-modal{
		cursor: pointer;
		padding:10px 0px 10px 0px;
		transition: 0.2s;
		background-color: white;
		width: 70vw !important;
		margin: 0px auto;
		border-radius: 2px;
	}
	.devis-modal:hover{
		background-color: transparent;
		border: 1px solid white;
		color: white;
	}
	.devis-modal span:hover{
		color: white;
		transition: 0.2s;
	}

	.pricing .text-tarifs h4{
		text-align: center;
		padding: 0px 0px 20px 0px;
	}
	.pricing .text-tarifs h4 a{
		text-decoration: none;
	}
	.pricing .text-tarifs h4 a:hover{
		border-bottom: 1px solid;
		transition: 0.2s;
	}

	.pricing-grid {
	    display: grid;
	    /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
	    grid-template-columns: 1fr !important;
	    grid-template-areas:"pricing-item-1"
	    					"pricing-item-2"
	    					"pricing-item-4"
	    					"pricing-item-3" !important;  				
	    row-gap: 50px !important;
	    /*margin: 0px 70px 0px 70px !important;*/
	}

}



@media screen and (min-width:100px) and (max-width:500px){	

	.tarifs-item {
	    opacity: 0;
	    transform: translateY(100px);
	    transition: opacity 1s ease-in-out;
	}

	.visible .tarifs-item {
	    animation: backInDown 1s ease-out forwards !important;
	}


	.pricing {
	    padding: 60px 0px 70px 0px;
	    background-color: #000000;
	    color: #ffffff;
	}

	.pricing h1:nth-child(1) {
	    text-align: center;
	    margin-bottom: 40px;
	    font-size: 2.5rem;
	    /*color: #00ff00;*/
	    color: white;
	}
	.pricing h1 span{
		border-bottom: 5px solid #00ff00;
		border-radius: 10px;
	}

	.devis-modal span{
		transition: 0.2s;
		color: black;
	}
	.devis-modal{
		cursor: pointer;
		padding:10px 0px 10px 0px;
		transition: 0.2s;
		background-color: white;
		width: 60vw !important;
		margin: 0px auto;
		border-radius: 2px;
	}
	.devis-modal:hover{
		background-color: transparent;
		border: 1px solid white;
		color: white;
	}
	.devis-modal span:hover{
		color: white;
		transition: 0.2s;
	}

	.pricing .text-tarifs h4{
		text-align: center;
		padding: 0px 0px 20px 0px;
	}
	.pricing .text-tarifs h4 a{
		text-decoration: none;
	}
	.pricing .text-tarifs h4 a:hover{
		border-bottom: 1px solid;
		transition: 0.2s;
	}

	.pricing-grid {
	    display: grid;
	    /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
	    grid-template-columns: 1fr !important;
	    grid-template-areas:"pricing-item-1"
	    					"pricing-item-2"
	    					"pricing-item-4"
	    					"pricing-item-3" !important;  				
	    row-gap: 50px !important;
	    margin: 0px 35px 0px 35px;
	}

}

@media screen and (max-width:300px){
	.pricing-item{
		/*margin: 0px 15px 0px 15px;*/
		max-width: 5vw !important;
		/*margin: 0px auto;*/
	}
	.pricing {
	    padding: 60px 0px 70px 0px;
	    background-color: #000000;
	    color: #ffffff;
	}

	.pricing h1:nth-child(1) {
	    text-align: center;
	    margin-bottom: 40px;
	    font-size: 10px !important;
	    /*color: #00ff00;*/
	    color: white;
	}
	.pricing h1 span{
		border-bottom: 5px solid #00ff00;
		border-radius: 15px;
	}

	.devis-modal span{
		transition: 0.2s;
		color: black;
		font-size: 10px !important;
	}
	.devis-modal{
		cursor: pointer;
		padding:10px 0px 10px 0px;
		transition: 0.2s;
		background-color: white;
		max-width: 70vw !important;
		margin: 0px auto;
		border-radius: 2px;
	}
	.devis-modal:hover{
		background-color: transparent;
		border: 1px solid white;
		color: white;
	}
	.devis-modal span:hover{
		color: white;
		transition: 0.2s;
	}

	.pricing .text-tarifs h4{
		text-align: center;
		padding: 0px 0px 20px 0px;
	}
	.pricing .text-tarifs h4 a{
		text-decoration: none;
	}
	.pricing .text-tarifs h4 a:hover{
		border-bottom: 1px solid;
		transition: 0.2s;
	}

	.pricing-grid {
	    display: grid;
	    /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
	    grid-template-columns: 1fr !important;
	    grid-template-areas:"pricing-item-1"
	    					"pricing-item-2"
	    					"pricing-item-4"
	    					"pricing-item-3" !important;  				
	    row-gap: 50px !important;
	    /*margin: 0px 70px 0px 70px !important;*/
	}
}