/*This is the CSS which manage the responsive design (landscape, smartphone, tablet...)*/

/*Media for half screen or tablet*/
@media all and (max-width:1300px) and (orientation:landscape) {

	html{
		overflow: auto !important;
	}

	#disparition{
		position: relative !important;
		height: auto !important;
		bottom: auto;

	}
	#start{
		display: none;
	}


	.scrollResponsive{
		overflow: scroll !important;
		left: -12%;

	}

	#contractPanelLine1{
		left: 8%;
	}

	.responsiveTablettePortraitCompetenceBloc{
		margin-right: 20% !important;
	}

	#WE1e8cd594b7-1, #WE1e8cd594b7-2, #WE1e8cd594b7-3, #WE1e8cd594b7-4, #WE1e8cd594b7-5, #WE1e8cd594b7-6 {
		width: 250px !important;
		height: 200px !important;
	}


	#WEad2ec10fa6{
		display: none;
	}

	#about02{
		display: none !important;
	}

	#WEbbd2df5017{
		padding-left: 0;
		width: 100% !important;
	}

	#topBarAligner {
		height: 80%;
	}

	#WEbbd2df5017-parent {
		text-align: center;
	}

	#info {
		clear: both;
		height: auto;
		margin-right: 4%;
		width: 60%;
	}

	.responsiveTablettePortraitRadius{
		border-radius: 15px;
	}

	#about01 {
		height: 5%;
	}

	#contractPanelLine1, #contractPanelLine2 {
		flex-direction: column;
	}

	.carShow {
		margin-left: auto;
		margin-right: auto;
	}

	#telecomMaster {
		display: none;
	}

	#menu-box {
		padding: 0 12%;
		width: 100%;
		min-width: 360px !important;
	}

	#contractListPanel span {
		text-align: left;
		margin: 0;
	}

	#WE1e8cd594b7-4, #WE1e8cd594b7-5, #WE1e8cd594b7-6 {
		margin-top: 0;
	}

	.responsiveTablettePortrait{
		height: 160px !important;
		width: 220px !important;
		top: 50%;
	}

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 230px !important;
		height: 190px !important;
		left: 10px;
		bottom:  50px;
	}

}

@media (min-width: 1250px) and (max-width:1300px) {
	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 235px !important;
		height: 190px !important;
		left: 10px;
		bottom:  50px;
	}
}

@media (max-width: 1100px){

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 210px !important;
		height: 180px !important;
		left: 40px;
		bottom:  60px;
	}
}



@media (max-width: 1100px) and (orientation:landscape){

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 190px !important;
		height: 165px !important;
		left: 40px;
		bottom:  60px;
	}

	#WE1e8cd594b7-1, #WE1e8cd594b7-2, #WE1e8cd594b7-3, #WE1e8cd594b7-4, #WE1e8cd594b7-5, #WE1e8cd594b7-6 {
		width: 250px !important;
		height: 200px !important;
	}


	.responsiveTablettePortrait{
		height: 130px !important;
		width: 180px !important;
		top: 50%;
		left: -100%;
	}

	.responsiveTitleBloc{
		font-size: 75% !important;
	}

	.responsiveImportantParagraphBloc{
		font-size: 65% !important;
	}

	.responsiveParagraphBloc{
		font-size: 70% !important;
	}
}


@media (max-width: 900px) and (min-width: 670px) and (orientation:landscape){

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 160px !important;
		height: 140px !important;
		left: 10px;
		bottom: 50px;
	}
	#WE1e8cd594b7-1, #WE1e8cd594b7-2, #WE1e8cd594b7-3, #WE1e8cd594b7-4, #WE1e8cd594b7-5, #WE1e8cd594b7-6 {
		width: 130px !important;
		height: 150px !important;
	}

	.responsiveTablettePortrait{
		height: 130px !important;
		width: 180px !important;
		top: 100%;
		left: -30%;
	}
	.responsiveParagraphBloc{
		font-size: 65% !important;
	}
}


@media (max-width: 670px) and (orientation: landscape){

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 140px !important;
		height: 110px !important;
		left: 10px;
		bottom: 90px;
	}
}





/*Media queries for laptop*/
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	#topBarAligner {
	}

	#WEbbd2df5017 {
		top: 13%;
	}

	#contract-comp {
		height: 80% !important;
		width: 80% !important;
	}

	#WEbbd2df5017 {
		padding-left: 8%;
	}
}

@media all and (max-width: 1100px) {
	#WEbbd2df5017 {
		padding-left: 0;
	}

	#topBarAligner {
		top: 20%;
	}

	#WEbbd2df5017 {
		top: 20%;
	}
}

/*Media queries for tablet in landscape mode*/
@media all and (max-height: 622px) and (orientation:landscape) {
	#topBarAligner {
		top: 15%;
		height: 90%;
	}

	#WEbbd2df5017 {
		top: 6%;
	}

	#info p {
		font-size: 90%;
	}
}

@media all and (max-height: 900px) and (orientation:landscape) {
	.ContentBox {
		margin: 0;
	}
/* 
	#menu-box {
		padding-left: 0;
	} */

		#videoController {
		right: 0%;
		position: absolute;
		bottom: 0;
		top: auto;
		height: 45px;
		width: 33.75px;
		z-index: 1;
	}

	.dispaSize{
		display: none !important;
	}

	#goSize{
		display: block !important;
	}
}

@media all and (max-width:990px){

    .boutonBandeau{

    background-color: rgb(1, 20, 51);      
    color: white;
    /* margin-top: 1% !important;
    margin-bottom: 1% !important; */
    border-radius: 7px !important;
    background-attachment: fixed;

    } 
}
@media all and (max-width:1600px) and (min-width: 1300px){

	#contractPanelLine1 {
		left: 3%;
	}
}


/*Media queries for tablet in portrait mode*/
@media all and (max-width:1280px) and (orientation:portrait) {

	#disparition{
		position: relative !important;
		height: auto !important;
		bottom: auto;
	}

	#start{
		display: none;
	}

	
	.responsiveTablettePortraitCompetenceBloc{
		margin-right: 8% !important;
	}

	#contractPanelLine1{
		left: 13%;
	}


	#about02{
		display: none !important;
	}

	#videoController {
		right: 0%;
		position: absolute;
		bottom: 0;
		top: auto;
		height: 40px;
		width: 30px;
		z-index: 1;
	}

	.dispaSize{
		display: none !important;
	}

	#goSize{
		display: block !important;
	}

	#telecomMaster {
		display: none;
	}


	.scrollResponsive{
		overflow: scroll !important;
		left: -12%;

	}

	.responsiveBloc{
		width: 85% !important;
	}

/*	.card {
		width: 32% !important;
		height: 40% !important;
	}*/

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 230px !important;
		height: 177px !important;
		bottom:  40px;
		right: 10px;
	}

	.responsiveTablettePortrait{
		height: 178px !important;
		width: 240px !important;
		top: -55%;
		left: 125%;
	}

	.responsiveTablettePortraitRadius{
		border-radius: 15px;
	}
	.responsiveTablettePortraitCompetenceBloc{
		top: 15%;
	}

	#info{
		width: 80%;
	}



	#WEad2ec10fa6{
		display: none;
	}

	#topBarAligner, #WEbbd2df5017 {
		top: 15%;
	}

	#contractListPanel span {
		text-align: left;
	}

	.master3-carshow {
		display: none;
	}

	.master2-carshow {
		display: flex;
	}
}

@media all and (max-width:1100px) and (orientation:portrait) {

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 200px !important;
		height: 165px !important;
		bottom:  100px;
	}
	html{
		overflow: auto !important;
	}

	.responsiveTablettePortrait{
		height: 178px !important;
		width: 240px !important;
		top: -25%;
		left: 35%;
	}

	.responsiveTitleBloc{
		font-size: 90% !important;
	}

	.responsiveImportantParagraphBloc{
		font-size: 80% !important;
	}

	.responsiveParagraphBloc{
		font-size: 85% !important;
	}
}

@media all and (max-width:900px) and (min-width: 800px ) and (orientation:portrait) {

	.responsiveTablettePortrait{
		height: 178px !important;
		width: 240px !important;
		top: -25%;
		left: 55%;
	}
}

@media all and (max-width:800px) and (min-width: 700px ) and (orientation:portrait) {

	.responsiveTablettePortrait{
		height: 178px !important;
		width: 240px !important;
		top: -25%;
		left: 25%;
	}


}

@media all and (max-width:600px) and (orientation:portrait) {


	.responsiveTablettePortrait{
		top: -25%;
		left: 45%;
	}
	.responsiveImportantParagraphBloc{
		font-size: 70% !important;
	}

	.responsiveParagraphBloc{
		font-size: 65% !important;
	}
}

@media all and (max-width:900px) and (orientation:portrait){


	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 140px !important;
		height: 110px !important;
		bottom:  100px;
		left: 10px;
	}
}




/*Media for smartphones*/
@media all and (max-device-width:480px) and (orientation:portrait) {
	
	#responsiveMobileTitle{
		font-size: 2.5vh;
	}

	.card {
		display: flex;
		height: 50px !important;
		width: 350px !important;
		justify-content: center !important;
		margin: 4% auto 4% auto !important;
		border-radius: 1px solid;
	}

	#menu-box-parent {
		text-align: center;
		bottom: 0;
		height: 100%;
		position: absolute;
	}

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 200px !important;
		height: 165px !important;
		bottom:  0;
		left: 100px;
	}

	/* #WEbbd2df5017 {

    padding-left: 5% !important;
    width: 80% !important;
    height: 70% !important;

	} */

	#videoController{
		display: none;
	}

}

/*Media for smartphones in landscape mode*/
@media all and (orientation:landscape) and (max-device-width:780px) {


	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 140px !important;
		height: 110px !important;
		bottom:  80px;
	}

	#videoController{
		display: none;
	}

}

@media (max-width: 670px) and (orientation:landscape){


	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 120px !important;
		height: 100px !important;
		bottom:  90px;
		left: 50px
	}


}

@media (max-width: 580px) and (orientation:landscape){


	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 90px !important;
		height: 75px !important;
		bottom:  90px;
		left: 50px
	}


}

@media (max-width: 1550px) and (min-width: 1300px){

	
	.responsiveTablettePortrait{

		height: 125% !important;
		width: 125% !important;
		top: 100px;

	}
} 

@media(min-width: 950px){

	#disparition{
		font-size: 90% !important;
	}
}


@media(min-width: 1300px){

#WE1e8cd594b7-1, #WE1e8cd594b7-2, #WE1e8cd594b7-3, #WE1e8cd594b7-4, #WE1e8cd594b7-5, #WE1e8cd594b7-6 {
		width: 300px !important;
		height: 250px !important;
	}

}

.responsiveTablettePortraitContratBloc{
	width: 90% !important;

}


/******************************
** responsive animation mobile
*******************************/
@media (orientation: landscape) {
	#menu-box {
		top: 5%;
		height: 50% !important;
	}	
}

@media only screen and (min-device-width: 320px) and (max-device-width: 700px) {
	#menu-box {
		top: 20%;
		height: 50% !important;
	}	
}

@media (max-width: 670px){

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 120px !important;
		height: 100px !important;
		left: 0px;
		margin: 10px !important;
	}

}

@media (min-width: 200px) and (max-width: 375px){
	#menu-box {
		padding: 0 !important;
		top: 5%;
	}

	#WE52b3d1f2e0, #WE6ad9cb2554, #WE6ed8a61973, #WE189dce1e72, #WE0818455994, #WE2d168dacb1 {
		width: 120px !important;
		height: 110px !important;
		bottom:  100px;
		left: 10px;
	}
}

@media (min-width: 376px) and (max-width: 405px){
	#menu-box {
		top: -8%;
		padding: 0 12% !important;
	}
}

@media (min-width: 406px) and (max-width: 434px){
	#menu-box {
		top: -8%;
		padding: 0 15%;
	}
}

@media (min-width: 435px) and (max-width: 445px){
	#menu-box {
		top: -8%;
		padding: 0 17%;
	}
}

@media (min-width: 445px) and (max-width: 450px){
	#menu-box {
		top: -8%;
		padding: 0 18%;
	}
}

@media (min-width: 470px) and (max-width: 469px){
	#menu-box {
		top: -8%;
		padding: 0 20%;
	}
}