@media (min-width: 1200px){
	.container{
		max-width: 1340px;
	}
	
	.toggle{
		flex: 0 0 calc(100% / 4);
	}
}

@media (max-width: 1200px){
	#fastbar .container{
		max-width: calc(100% - 20px);
	}
	
	.page .container:nth-child(2){
		max-width: 100%;
		width: 100%;
	}
	
	#home .services{
		padding-top: 60px;
	}
	
	#home .services .row{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}
	
	#home .services .service{
		margin-bottom: 80px
	}
	
	#home .swapper p{
		font-size: 18px;
	}
	
	.tarifs{
		flex-flow: row wrap;
	}
	
	.tarifs .tarif{
		flex: 0 0 calc(100% / 3 - 25px);
		margin-bottom: 40px;
	}
	
	.vps .tarifs .tarif{
		flex: 0 0 calc(100% / 3 - 25px);
	}
	
	.vps .tarifs .tarif .sale{
		font-size: 14px;
	}
}

@media (max-width: 1090px){
	#fastbar .btn i{
		display: none;
	}
}

@media (max-width: 900px){
	#fastbar #first p{
		display: none;
	}
	
	#fastbar .btn i{
		display: inline-block;
		margin-right: 0;
	}
	
	#fastbar .btn span{
		display: none;
	}
}

@media (max-width: 600px){
	#fastbar .list:nth-of-type(1) a{
		padding-right: 0;
	}
	
	#fastbar .list:nth-of-type(1) span{
		display: none;
	}
	
	#fastbar #third strong{
		display: none;
	}
	
	#fastbar .list.currencies{
		display: none;
	}
}

@media (max-width: 470px){
	#fastbar .btn{
		margin-left: 0;
	}
	
	#fastbar .container #first{
		flex-flow: column;
		align-items: flex-start;
		
	}
	
	#fastbar .container #first .list{
		margin-left: 0;
	}
	
	#fastbar .container #second{
		flex: 5;
	}
	
	#fastbar .container #third p{
		padding-top: 0;
		display: flex;
		flex-flow: column;
		align-items: flex-end;
	}
	
	#fastbar .links a{
		margin-left: 0;
		margin-bottom: 5px;
	}
	
	#fastbar #third #loggedOut .btn:nth-of-type(2){
		display: none;
	}
}

/**
respo bootstrap lg
*/
@media (max-width: 992px){
	
	#breadcrumb .container.bc{
		display: grid;
		grid-template-columns: 50% 50%;
	}
	
	#breadcrumb h1.title{
		text-align: right;
	}
	
	.toggleBar{
		padding-bottom: 10px;
		display: flex;
		flex-flow: row wrap;
	}
	
	.toggleBar .toggle{
		flex: 0 0 calc(100% / 2);
		margin-bottom: 20px;
	}
	
	.toggle .toggle__title{
	
	}
	
	.toggle .toggle__description{
		font-size: 14px;
	}
	
	
	.tarifs{
		flex-flow: row wrap;
	}
	
	.tarifs .tarif,
	.vps .tarifs .tarif{
		flex: 0 0 calc(100% / 2 - 25px);
		margin-bottom: 40px;
	}
	
	
	#domainValidation button[type=submit]{
		padding: 9px;
	}
	
	.tarifsTable{
		display: block !important;
	}
	
	#navbarCollapse{
		width: 100%;
		height: auto;
	}
	
	#navbarCollapse ul li{
		display: flex;
		flex-direction: column;
	}
	
	#navbarCollapse ul li.show{
		display: flex;
		height: auto;
	}
	
	#navbarCollapse .nav-link{
		padding: 10px !important;
		display: block;
		width: 100%;
	}
	
	#navbarCollapse ul .dropdown-menu{
		width: 100%;
		padding-left: 15px;
		overflow: hidden;
		height: 0;
	}
	
	#navbarCollapse ul .dropdown-menu.show{
		height: auto;
	}
	
	
	.tarifs .tab-pane.show{
		display: flex;
		flex-wrap: wrap;
	}
	
	.tarifs .tab-pane.show .tarif{
		flex: 1 0 47%; /* explanation below */
		margin: 10px;
		flex-grow: 1;
	}
	
}

@media (max-width: 991px){
	#navbarCollapse{
		height: unset;
	}
	
	#navbarCollapse ul{
		height: unset;
	}
	
	#navbarCollapse.collapsing{
		height: 0;
	}
	
	.toggleBar .toggle{
		flex: 0 0 calc(100%);
		margin-bottom: 20px;
	}
	
}


/**
respo bootstrap md
*/
@media (max-width: 768px){
	.domainValidationForm .fieldset .select, .domainValidationForm .fieldset .input{
		flex: 0 0 calc(100% / 2 - 25px)
	}
	
	.page__contact .box{
		padding: 20px;
	}
	
	
	.toggleBar{
		padding-bottom: 10px;
	}
	
	#home .services{
		padding-top: 60px;
	}
	
	#home .services .service{
		margin-bottom: 80px
	}
	
	#home .swapper p{
		font-size: 18px;
	}
	
	#breadcrumb .nav-tabs{
		display: flex;
		flex-wrap: wrap;
	}
	
	#breadcrumb .nav .nav-item a.active{
		font-weight: normal;
	}
	
	#breadcrumb .nav-tabs .nav-item{
		flex: 1 0 50%;
		/*margin: 10px;*/
		flex-grow: 1;
	}
	
	
}


/**
bootstrap sm
*/
@media (max-width: 576px){
	.tarifs .tarif, .vps .tarifs .tarif{
		flex: 0 0 calc(100%);
		margin-bottom: 40px;
	}
	
	
	.page__contact .offices{
	
	}
	
	.page__contact .offices .office{
		text-align: center;
	}
	
	
	.page__contact .offsetBottom{
		display: block;
	}
	
	.page__contact .box{
		display: block;
		width: 100%;
		flex: 0;
	}
	
	.page__contact .box.left{
		display: flex;
		flex-flow: row;
		justify-content: space-between;
	}
	
	.page__contact .box.left .address img{
		display: none;
	}
	
	.page__contact .box.right .address p:nth-child(2){
		padding-right: 0;
	}
	
	.page__contact .box.right .col-6:last-child .address strong{
		height: 3em;
	}
	
	.page__contact .box.right .col-6:last-child .address,
	.page__contact .box.right .col-6:last-child .address strong{
		text-align: right;
	}
	
	
	#domainValidation button[type=submit]{
		padding: 9px;
		margin-bottom: 9px;
	}
	
	
	.cardList{
		padding: 20px 10px;
	}
	
	#home .swapper{
		padding-top: 75px;
		padding-bottom: 20px;
	}
	
	#home .swapper h1{
		font-size: 30px;
	}
	
	#home .swapper h2{
		font-size: 40px;
		height: 2.5em;
	}
	
	#home .swapper p{
		font-size: 14px;
	}
	
	#home .services{
		padding-top: 40px;
	}
	
	#home .service{
		margin-bottom: 60px;
	}
	
	#pre-footer .container{
		display: block;
	}
	
	#pre-footer p{
		flex: 1;
		text-align: center;
		padding: 10px 0;
	}
	
	#pre-footer .btn{
		flex: 1;
		padding: 10px 0;
		margin: 10px 0;
	}
	
	#pre-footer .btn.smaller{
		flex: 1;
		
	}
	
	#pre-footer .btn:last-child{
		margin: 0 !important;
	}
	
	#about{
		padding-top: 150px;
		padding-bottom: 0;
	}
	
	#about h2, #about p{
		padding: 0;
	}
	
	#about h2{
		font-size: 24px;
		margin-bottom: 10px;
	}
	
	#about p{
		font-size: 14px;
	}
	
	#about .box{
		padding-top: 0;
	}
	
	#about .box p{
		padding: 0;
	}
	
	#pre-footer{
		padding: 0;
	}
	
	#footer{
		text-align: center;
		padding: 30px 0;
	}
	
	#fastbar .container .row > div{
		justify-content: center;
	}
	
	
	#breadcrumb .container,
	#breadcrumb .container.bc{
		display: block;
	}
	
	
	#breadcrumb h1.title{
		text-align: center;
	}
	
	
	.tarifs .tab-pane.show .tarif{
		flex: 1 0 100%; /* explanation below */
		margin: 10px;
		flex-grow: 1;
	}
	
	.toggleBar{
		padding-bottom: 10px;
		display: block;
	}
	
	.toggleBar .toggle{
	
	}
	
	
	#breadcrumb .nav-tabs{
		display: flex;
		flex-wrap: wrap;
	}
	
	#breadcrumb .nav .nav-item a.active{
		font-weight: normal;
	}
	
	#breadcrumb .nav-tabs .nav-item{
		flex: 1 0 100%;
		/*margin: 10px;*/
		flex-grow: 1;
	}
}

@media (max-width: 425px){
	.domainValidationForm .fieldset .input,
	.domainValidationForm .fieldset .select{
		flex: 0 0 100%;
	}
	.domainValidationForm.smaller .fieldset .select {
		display: block;
		padding-top: 1rem;
	}
	.domainValidationForm.smaller .fieldset .select .bootstrap-select{
		width: 100% !important;
		display: block;
	}
	
	.bootstrap-select .btn{
		width: 100%;
	}
	
}

@media (max-width: 375px){
	
	#domainValidation .buttons{
		justify-content: center;
		flex-flow: column;
	}
}

@media (max-width: 320px){
	.tarif .sale span{
		display: none !important;
	}
	
	.tarif .sale strong span{
		display: inline-block !important;
	}
}