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

  nav #logo{
  	width: 80px;
  	height: 60px;
  }
  nav ul{
  	display: none;
  }
  nav #menubars{
  	display: block;
  	align-self: center;
  	margin-right: 0.3em;
  	font-size: 20px;
  }
  .menupop{
display: none;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1;
	position: fixed;
	bottom: 0;
}
.menupop .menu_container{
display: block;
}
.head h3{
	font-size: 25px;
	word-spacing: 3px;
	letter-spacing: 1px;
	border-bottom: 4px solid var(--red);
	text-align: center;


}

.home{
	width: 100%;
	height: 80%;
}

.home .pres .desc{
	width: 70%;
	height: auto;
	align-self: center;
	justify-self: center;
margin-right: 0;
	margin-top: 50px;
	border-radius: 15px;
}

.home .pres .desc .icon{
	display: flex;
	justify-content: center;
}
.home .pres .desc .icon i{

}
.home .pres .desc p{
	font-weight: bold;
	font-size: 1em;
	width: 100%;
	height: 90%;
}
.home .buttondiv{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.home .buttondiv #startbtn{
font-size: 14px;
padding: 5px;
width: 90%;
border:1px solid var(--primary);
height: 50px;
}
.home .buttondiv #openWindowBtn{
font-size: 14px;
padding: 5px;
width: 90%;
border:1px solid var(--primary);
height: 50px;

}


.occupations h4{
	font-size: 1.3em;
	font-weight: 600;
}

.occupations .card_container .card{
width: 100%;
	padding: 0.5em;
	background: transparent;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom:20px;
}


.occupations .card_container .card .text{
 bottom: 0;

}
.occupations .card_container .card .text p{
text-align: center;
font-size: 0.9em;
font-weight: 600;
color: var(--white);
bottom: 0;
}
.about .body .about_text{
	width: 95%;
	
}

.about .body .text{
flex-direction: column;
padding: 0px;
}
.about .body .text .about_text{
	flex-direction: column;
}
.about .body .text p{
width: 100%;
word-spacing: 1px;

}
.about .body .text .image{
	width: 100%;
}

.tarification .tarifcontainer{
	display: flex;
	flex-direction: column;
	padding: 0;
	margin-top: 20px;
}
.tarification .tarifcontainer .tablecontainer{

	width: 100%;
}
.portfolio .works .workcontainer{
	background: var(--primary_hover);
	width: 100%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.portfolio .works .workcard{
	width: 80%;
	height: 170px;
}
.portfolio .works .workcard .textdiv .icon i{
	width: 30px;
	height: 30px;
	font-size: 20px;
}
.portfolio .works .workcard .textdiv .title{
	font-size: 16px;
	letter-spacing: 1px;
	word-spacing: 2px;
}
.portfolio .works .workcard .textdiv .desc{
	font-size: 12px;
}
.team_scroll .personcard .bottom .description{
	width: 100%;
	height: 20%;
}
.team_scroll .personcard .bottom .upbutton{
	display: flex;
	width: 10px;
}
.team_scroll .personcard .social_mobile{
	display: flex;
}
.team_scroll .personcard:hover>.top{
display: none;
}
.contact_us .contactcontainer{
	flex-direction: column;
	gap: 20px;
	width: 100%;
}
.contact_us .contactcontainer .left,.contact_us .contactcontainer .right{
	width: 100%;
	padding: 0px;
	align-items: center;
	justify-content: center;
}
.contact_us iframe{
	width: 100%;
}
.contact_us .contactcontainer .left .infos{
	flex-direction: column;
	justify-content: left;
	align-items: flex-start;
	padding-left:10px;
}
.contact_us .contactcontainer .right .formbox{
	width: 90%;
}
.contact_us .contactcontainer .right .formbox .names{
	width: 97%;
}

.devis_main .devis_form{
	width: 90%;
	border-radius: 7px;
	min-height: 100%;
	padding-top: 10px;
}

.serv_cont{
	width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.devis_elem{
	width: 100%;
}

.footer{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
}

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

.home .pres .desc h6{
	

}
	.about .body .text .text_side .socials,.about .body .text .text_side .button{

align-items: center;
justify-content: center;

}
.about .body .text .text_side .button button{
width: 90%;

}

.team_scroll{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-direction: column;
	padding: 10px;
}
.team_scroll .personcard{
	width: 100%;
	min-height: 430px;
}
}
@media only screen and (max-width: 640px){
	.home{
	width: 100%;
	justify-content: start;
	height: 93vh;
}
.home .pres{
	align-items: flex-start;

}
.home .pres .desc img{
	width: 100px;
	height: 70px;
}
.home .pres .desc{
	min-height: 3vh;
	width: 90%;


}
.home .pres .desc .devise,.home .pres .desc .devise span{
	font-size: 23px;
	font-weight: bolder;
	word-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
}

.home .buttondiv #startbtn{
min-height: 30px;
}
.home .buttondiv #openWindowBtn{
min-height: 30px;

}
.about .body .text .image img{
height:300px;
margin: 0;
}
.about .objectifs, .about .valeurs{
	width: 100%;
	justify-content: center;
	align-items: center;
}
.about .objectifs .elements{
	grid-template-columns: repeat(auto-fit, minmax(100%,1fr));
	grid-gap: 10px;
}
.about .elements{
display: flex;
flex-direction: column;
gap: 20px;
	align-items: center;
	justify-content: center;
}
.about .elements #element{
	width: 100%;
	height: 450px;
}
.devis_main{
		align-items: flex-start;
}
.devis_main .devis_form{
	width: 90%;
	border-radius: 7px;
	height: 90vh;
	overflow-y: scroll;
	justify-content: start;
}

.serv_cont{
	width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.services .service{
	width: 87%;
	min-height: 370px;
	border-radius: 4px;
box-shadow: 1px 4px 8px #ccc;
display: flex;
flex-direction: column;
}
.portfolio .works .workcard{
	width: 95%;
	height: 230px;
}

.devis_elem{
	width: 100%;
}

/*.footer .contact{*/
/*	display: flex;*/
/*	flex-direction: column;*/
/*	gap: 5px;*/
/*	font-weight: normal;*/
/*	align-items: center;*/
/*}*/

}

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

.about .valeurs .elements{
	grid-template-columns: repeat(auto-fit, minmax(100%,1fr));
	grid-gap: 10px;
}



}