@import url('https://fonts.googleapis.com/css?family=Poppins');

body {
    font-family: "Poppins";
    background-image: url("BACKGROUND CAMION DARK 1.png");
    background-color: #1D2022;
    background-size: contain;
    background-repeat: no-repeat;
  	margin: 0;
}

html {
    scroll-behavior: smooth;
}

img{
    max-width: 100%;
}

/**HEADER**/

/*@media only screen and (min-width: 940px) {
	body {
      background-size: cover;
  	}
}
*/

@media only screen and (min-width: 1280px) {
    body {
        background-size: contain;
      	margin: 0;
    }
  
  	header {
      	display: grid;
    	grid-template-areas: "logo navbar";
    	grid-template-columns: 1fr 3fr;
  	}
  
  	nav {
     	grid-area: navbar;
  	}

    #logo {
		grid-area: logo;
    	justify-self: center;    }

    
    /**nav----bar**/


    a {
        text-decoration: none;
        color: white;
    }

    #navbar {
        padding: 15px;
        display: flex;
        list-style-type: none;
        color: white;
        font-size: 18px;
        justify-content: flex-end;
    }

    ul {
        list-style-type: none;
    }

    #navbar li {
        margin-right: 45px;
        color: white;
    }

    #navbar li:hover {
        margin-right: 45px;
        border-bottom: #191970 solid 2.5px;
        font-size: 18px;
    }


    /**nav----bar**/

    /**HEADER**/

    /*Corps de Page*/


    #Titre {
        line-height: 40px;
        margin-top: 10%;
        margin-left: 4%;
        margin-bottom: 30px;
    }

    #title {
      	font-size: 40px;
        color: white;
        margin-bottom: 20px;
        max-width: 48%;
    }

    #subtitle {
        max-width: 45%;
        font-family: 'Poppins';
        bottom: 35px;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 24px;
        color: white;
    }
    
    #butttonpack {
		display: flex;
    	margin-left: 4%;
  	}
  
    #Bt1 {        
        align-items: center;
        padding: 15px 30px;
        background: #F5F4F2;
        border: 2px solid #322E82;
        box-sizing: border-box;
        border-radius: 5px;
        position: static;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #322E82;
        text-decoration: none;
    }

  /*
    #Bt2 {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 20px 42px;
        position: static;
        width: 233px;
        height: 61px;
        left: 258px;
        top: 0px;
        background: #322E82;
        border-radius: 5px;
        flex: none;
        order: 1;
        flex-grow: 0;
        margin: 0px 25px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #FFFFFF;
        flex: none;
        order: 0;
        flex-grow: 0;
        margin: 0px 20px;
        text-decoration: none;
    }
  */

    /*PAGE MILLIEU*/
    #NSL {
      	margin-top: 120px;
		padding-top: 100px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 40px;
        text-align: center;
        color: #FFFFFF;
    }
  
  	#solutiongrid {
        display: grid;
        grid-template-areas: "sec pharma refrigere";
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1rem;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
  	}
  
  	#truckbox {
      	margin-left: auto;
    	margin-right: auto;
      	text-align: center;
      	grid-area: sec
  	}
  
  	#pharamaceutique {
      	margin-left: auto;
    	margin-right: auto;
      	text-align: center;
        grid-area: pharma
  	}
  
  	#truckdistribution {
      	margin-left: auto;
    	margin-right: auto;
      	text-align: center;
		grid-area: refrigere
  	}

    /* QUI SOMMES NOUS */

    #QSN {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 40px;
        line-height: 72px;
        text-align: center;
        color: #FFFFFF;
      	margin-top: 120px;
      	padding-top: 50px;
    }
  
  	#Presentation {
      	display: grid;
      	grid-template-areas: "pres1 pres1"
          	"pres2 image";
      	grid-template-columns: 1fr 1fr;
      	grid-gap: 1rem;
      	width: 90%;
      	margin-left: auto;
      	margin-right: auto;
  	}
  
    #qualite {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 36px;
        line-height: 50px;
        color: #FFFFFF;
      	grid-area: pres1;
      	text-align: center;
      	margin: 10px;
    }
  
    #presentationinp {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        color: #FFFFFF;
      	grid-area: pres2;
      
    }
  
    #carton {
        border-radius: 40px;
        background: url(LIVRAISON.png);
      	grid-area: image;
      	margin: auto;
    }
        
        /** Ce qu'ils pensent de Transcolis **/

    #CQT {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 48px;
        line-height: 72px;
        text-align: center;
        color: #FFFFFF;
    }
  
    
  
    /*Services et devis*/
  
    #servicesdevis {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 34px;
        line-height: 39px;

        text-align: center;

        color: #FFFFFF;
    }
  
    #obtenezundevis {
      	font-size: 23px;
    }
  
    /*phone et mail*/
  
    #imgphone {
        position: absolute;
        left: 35.5%;
        right: 60.6%;
        top: 2320px;
    }
  
    #num {
        position: absolute;
        width: 148px;
        height: 32px;
        left: 570px;
        top: 2315px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        line-height: 32px;
        color: #FFFFFF;
    }
  
    #imgmail {
        position: absolute;
        left: 42%;
        right: 48.65%;
        top: 2322px;
    }
  
    #mail {
        position: absolute;
        width: 236px;
        height: 32px;
        left: 670px;
        top: 2315px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        font-size: 22px;
        line-height: 32px;
        color: #FFFFFF;
    }
  
    #Letstalk {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px 15px;
        background: #322E82;
        border-radius: 5px;
        flex: none;
        order: 0;
        flex-grow: 0;
        margin: 50px 0px;
    }
  
  
  	#clients {
  		display: grid;
      	grid-template-areas:"cp cp"
          "mairie leclerc";
      	grid-template-columns: 1fr 1fr 1fr 1fr;
    	grid-gap: 2rem;
      	width: 90%;
      	margin-left: auto;
    	margin-right: auto;
	}
  
  	#logocp {
      	grid-area: cp;
      	grid-column-start: 2;
    	grid-column-end: 4;
    	margin: auto;
  	}
  
  	#mairielogo {
		grid-area: mairie;
     	grid-row-start: 2;
    	grid-column-end: 3;
    	margin: auto;
  	}
  	
  	#textleleclerc {
      	grid-area: leclerc;
      	grid-row-start: 2;
    	grid-column-start: 3;
    	grid-column-end: 5;
    	margin: auto;
  	}

  
  	#raisons {
		display: grid;
        grid-template-areas:
            "r1 r2 r3"
            "r4 r5 r6";
        grid-gap: 2rem;
        grid-template-columns: 1fr 1fr 1fr;
        width: 60%;
        max-width: 1200px;
        margin: auto;
  	}
  
  	#borderlast p, #borderlast2 p, #borderlast3 p, #borderlast4 p, #borderlast5 p, #borderlast6 p {
      	color: white;
      	text-align: center;
      	font-size: 24px;
  	}
  
  	#raisons div {
        border: solid white;
    	border-radius: 16px;
    	padding: 10px;
    	text-align: center;
    }
  
  	.field {
        width: 80%;
        outline: none;
        background-color: #fff;
        padding: 0.5rem 1rem;
        font-size: 18px;
        margin-bottom: 22px;
        transition: .3s;
        border-radius: 10px;
      	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
  	}
  
  	.btn {
        width: 50%;
        padding: 1rem 1rem;
        background-color: #322E82;
        color: #fff;
        font-size: 18px;
        border: none;
        outline: none;
        cursor: pointer;
        transition: .3s;
        border-radius: 7px;
      	margin-bottom: 30px;
    }
  
  	.right {
    	text-align: center;  
  	}
  
  	textarea {
    	min-height: 150px;
	}
  
    .contact-box {
    	display: grid;
    	grid-template-areas:
        	"h2 h2"
        	"photo form";
    	grid-gap: 1rem;
    	width: 70%;
    	margin: auto;
  	}
  
  	.container {
      	padding-top: 100px;
  	}

  
  	.contact-box h2 {
      	margin-top: 70px;
		width: 80%;
        font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 500;
    	font-size: 48px;
        text-align: center;
    	color: #FFFFFF;
    	margin-left: auto;
    	margin-right: auto;
      	padding: 10px;
      	grid-area: h2;
  	}
  
    
    #texttotalking {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #FFFFFF;
        flex: none;
        order: 0;
        flex-grow: 0;
        margin: auto;
        text-decoration: none;
    }

	#sixraisonsdechoisirtranscolis {
      	padding-top: 70px;
    	font-family: 'Poppins';
    	font-style: normal;
        font-weight: 500;
        font-size: 48px;
        text-align: center;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
	}
  
  	#sixraisonsdechoisirtranscolissubtitle {
  		font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 400;
    	font-size: 24px;
    	color: white;
      	width: 50%;
    	margin-left: auto;
    	margin-right: auto;
      	text-align: center;
  	}


    #footer {
        height: 500px;
    }

    #message {
        color: white;
        font-size: 50px;
    }
}



/***********************/
/**Affichage Téléphone**/
/***********************/



@media only screen and (max-width: 768px) {
  
  	
  	#navbar {
    	display: none;
   	}
  	
  	#logo {
    	width: 50%;
    	padding-top: 10px;
      	max-width: 350px;
	    display: block;
	}

	#sublogo {
		width: 50%;
      	max-width: 350px;
    	display: block;
	}
  
  	#Titre {
    	padding: 25% 10px 0px 10px;
    	width: 90%;
    	margin-left: auto;
    	margin-right: auto;
    	display: grid;
    	grid-template-areas:
        	"title"
        	"subtitle"
        	"buttons";
    	/*grid-gap: 1rem;*/
	}
  		
  	#title {
    	font-size: 24px;
    	color: white;
    	line-height: normal;
    	font-weight: 800;
        grid-area: title;
    }
  	  
  	#subtitle {
    	font-family: 'Poppins';
    	bottom: 35px;
    	font-style: normal;
    	font-size: 20px;
    	line-height: normal;
    	color: white;
      	height: auto;
      	grid-area: subtitle;
	}
  
  	#butttonpack {
      	grid-area: buttons;
      	
  	}
  
  	#Bt1 {        
      	display: block;
		text-align: center;
    	padding: 20px;
    	width: 50%;
   		background: #F5F4F2;
    	border: 2px solid #322E82;
    	box-sizing: border-box;
    	border-radius: 5px;
    	font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 800;
    	font-size: 14px;
    	letter-spacing: 0.03em;
    	text-transform: uppercase;
    	color: #322E82;
        margin-left: auto;
      	margin-right: auto;
        text-decoration: none;
	}
  
	#Bt2 {
		display: inline-block;
        text-align: center;
        padding: 10px;
        width: 38%;
        background: #322E82;
        border-radius: 5px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 800;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        text-decoration: none;
	}
  
  	#NSL {
      	margin-top: 50px;
		width: 80%;
        font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 800;
    	font-size: 24px;
        text-align: center;
    	color: #FFFFFF;
    	margin-left: auto;
    	margin-right: auto;
    	/*text-decoration: underline #322e82;
    	text-decoration-line: underline;
    	text-decoration-thickness: initial;
    	text-decoration-style: initial;
    	text-decoration-color: #322e82;*/
      	border: solid 2px #322e82;
      	padding: 10px;
	}
  
  	#solutiongrid {
      	display: grid;
      	grid-template-columns: 1fr;
      	grid-template-areas: "sec"
          	"pharma"
          	"refrigere"
          	;
  	}
  
  	#truckbox {
      	margin-left: auto;
    	margin-right: auto;
    	width: 90%;
      	text-align: center;
      	grid-area: sec
  	}
  
  	#pharamaceutique {
      	margin-left: auto;
    	margin-right: auto;
    	width: 90%;
      	text-align: center;
        grid-area: pharma
  	}
  
  	#truckdistribution {
      	margin-left: auto;
    	margin-right: auto;
    	width: 90%;
      	text-align: center;
		grid-area: refrigere

  	}
  
  	#QSN {
      	margin-top: 50px;
		width: 80%;
        font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 800;
    	font-size: 24px;
        text-align: center;
    	color: #FFFFFF;
    	margin-left: auto;
    	margin-right: auto;
    	/*text-decoration: underline #322e82;
    	text-decoration-line: underline;
    	text-decoration-thickness: initial;
    	text-decoration-style: initial;
    	text-decoration-color: #322e82;*/
      	border: solid 2px #322e82;
      	padding: 10px;
  	}
  
  	#Presentation {
  		width: 90%;
	    margin-left: auto;
	    margin-right: auto;
  	}
  
  	#qualite {
		font-family: 'Poppins';
		font-style: normal;
		font-weight: 500;
		font-size: 20px;
		color: white;
	}
  	
  	#presentationinp {
		font-family: 'Poppins';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		color: white;
	}
  
  	#carton {
      	border-radius: 20px;
  	}
  
  	#CQT {
      	margin-top: 50px;
		width: 80%;
        font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 800;
    	font-size: 24px;
        text-align: center;
    	color: #FFFFFF;
    	margin-left: auto;
    	margin-right: auto;
    	/*text-decoration: underline #322e82;
    	text-decoration-line: underline;
    	text-decoration-thickness: initial;
    	text-decoration-style: initial;
    	text-decoration-color: #322e82;*/
      	border: solid 2px #322e82;
      	padding: 10px;
	}
  
  	#clients {
  		display: grid;
      	grid-template-areas:
        	"cp"
        	"mairie"
        	"leclerc";
    	grid-gap: 3rem;
      	width: 90%;
      	margin-left: auto;
    	margin-right: auto;
	}
  
  	#sixraisonsdechoisirtranscolis {
      	margin-top: 70px;
		width: 80%;
        font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 800;
    	font-size: 24px;
        text-align: center;
    	color: #FFFFFF;
    	margin-left: auto;
    	margin-right: auto;
    	/*text-decoration: underline #322e82;
    	text-decoration-line: underline;
    	text-decoration-thickness: initial;
    	text-decoration-style: initial;
    	text-decoration-color: #322e82;*/
      	border: solid 2px #322e82;
      	padding: 10px;
	}
  
  	#sixraisonsdechoisirtranscolissubtitle {
  		font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 400;
    	font-size: 18px;
    	color: white;
      	width: 90%;
    	margin-left: auto;
    	margin-right: auto;
      	text-align: center;
  	}
  
  	#raisons {
      	display: grid;
      	grid-template-areas:
			"r1 r2 r3"
          	"r4 r5 r6"
        ;
      	grid-gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
  	}
  
  	#borderlast p, #borderlast2 p, #borderlast3 p, #borderlast4 p, #borderlast5 p, #borderlast6 p {
      	color: white;
      	text-align: center;
      	font-size: 18px;
  	}
  
  	#raisons div {
        border: solid white;
        border-radius: 16px;
        padding: 10px;
      	text-align: center;
	    width: -webkit-fill-available;
    }
  
  	.contact-box h2 {
      	margin-top: 70px;
		width: 80%;
        font-family: 'Poppins';
    	font-style: normal;
    	font-weight: 800;
    	font-size: 24px;
        text-align: center;
    	color: #FFFFFF;
    	margin-left: auto;
    	margin-right: auto;
    	/*text-decoration: underline #322e82;
    	text-decoration-line: underline;
    	text-decoration-thickness: initial;
    	text-decoration-style: initial;
    	text-decoration-color: #322e82;*/
      	border: solid 2px #322e82;
      	padding: 10px;
  	}
  	
  	.field {
        width: 80%;
        outline: none;
        background-color: #fff;
        padding: 0.5rem 1rem;
        font-size: 18px;
        margin-bottom: 22px;
        transition: .3s;
        border-radius: 10px;
      	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
  	}
  
  	.btn {
        width: 50%;
        padding: 1rem 1rem;
        background-color: #322E82;
        color: #fff;
        font-size: 18px;
        border: none;
        outline: none;
        cursor: pointer;
        transition: .3s;
        border-radius: 7px;
      	margin-bottom: 30px;
    }
  
  	.right {
    	text-align: center;  
  	}
  
  	textarea {
    	min-height: 150px;
	}
  
  	.left {
  		display: none;
  	}
  
}

@media only screen and (max-width: 550px) {
	#raisons {
    	display: grid;
    	grid-template-areas:
        	"r1 r2"
       		"r3 r4"
			"r5 r6";
    	grid-gap: 1rem;
    	grid-template-columns: 1fr 1fr;
	}
  

}