body {overflow-x:hidden!important;}

.border, .test {border:1px solid red!important;}
.radius {border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 0px solid #000000;}



/* decoration  ------------------------------------*/

.text-decoration {text-decoration:underline!important;}
.underline {text-decoration:underline!important;}
.uppercase {text-transform:uppercase;}



/* positions  ------------------------------------*/

.float-right {float:right;}
.float-left {float:left;}
.float-none {float:none;}
.center {text-align:center;margin: 0 auto;}
.left {text-align:left!important;}
.clear {clear:both;padding:10px 0;}
.block-div {display:block;min-height:auto!important;}
.block-div:hover {box-shadow:none;}
.inline-block {display:inline-block;}
.inline {display:inline;}
.fixed {position:fixed;}
.relative {position:relative;}
.absolute {position:absolute;}
.absolute.center {position:absolute;display: flex;align-items: center;justify-content: center;text-align: center;}

/* img   ------------------------------------*/

.full-width {width:100%; min-width:100%;height:auto;}
	
/* visibility settings  ------------------------------------*/

.hidden {position:absolute;top:-99999px!important;}	
.hidde {display:none;}
.hide-for-mobile {display:block;}
.hide-for-desktop {display:none;}
.overflow-hidden {overflow:hidden;}
.overflow-visible {overflow:visible;}
.visibility {visibility:hidden;}
.flex {display:flex;padding:0;margin:0;}
.flex li {list-style:none;padding:0;margin:0;}
.flex.column {flex-direction: column;}
.flex.row {flex-direction: row;}
.flex.center{align-items: center; justify-content: center;}
ul li:before  {display:none;}




/* Margins   ------------------------------------*/

.reset {margin:0;padding:0;}
section {display:block;overflow:hidden;}


/* header ------------------------------------*/

#over-top-banner {background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;  
	height: 340px;
margin-bottom: 20px;
}

#over-top-banner.fr {background-image: url('https://cdn-mkt.be.carrefour.eu/free-html/EB-26056/carrefour_magasins_header_fr.jpg');}
#over-top-banner.nl {background-image: url('https://cdn-mkt.be.carrefour.eu/free-html/EB-26056/carrefour_magasins_header_nl.jpg');}


.container-fluid {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    margin-top: 0px;
    left: 50%;
    height: auto;
}


/* COLOR txt   ------------------------------------*/

.open-sans {font-family: 'Open Sans', sans-serif;}
.pacifico {font-family: 'Pacifico', cursive;}
.ubuntu {font-family: 'Ubuntu', sans-serif;}
.ubuntu_light, .UbuntuLight  { font-family: "UbuntuLight", sans-serif;}
.UbuntuBold {font-family: "UbuntuBold";}
.open-sans_semi_bold {font-family: 'OpenSansSemiBold', sans-serif;}
.caveat {font-family: 'Caveat', cursive;}
.goodlife-script{font-family: goodlife-script, sans-serif;font-style: normal;font-weight: 400;}

.weight100 {font-weight:100!important;}
.weight200 {font-weight:200!important;}
.weight300 {font-weight:300!important;}
.weight400 {font-weight:400!important;}
.weight500 {font-weight:500!important;}
.weight600 {font-weight:600!important;}
.weight700 {font-weight:700!important;}
.weight800 {font-weight:800!important;}
.weight900 {font-weight:900!important;}

.txt-grey {color:#575757!important;}
.txt-grey-light {color:#8c8c8c!important;}
.txt-orange {color:#f47321!important;}
.txt-white {color:#ffffff!important;}
.txt-primary {color:#5cb5ed!important;}
.txt-blue {color:#0e3368!important;} 
.txt-blue-light {color:#004E9E!important;} 
.txt-blue-light-2 {color:#049EE3!important;} 
.txt-green {color:#0c532e!important;}
.txt-red {color:#EF373D!important;}
.txt-wine {color:#A02448!important;}
.text-blue-primary, .txt-blue-primary {color:#0670E6!important;}

.bg-white {background-color:#ffffff!important;}
.bg-blue {background-color:#0e3368!important;}
.bg-blue-light {background-color:#F4F9FF!important;}
.bg-blue-primary {background-color:#0670E6!important;}
.bg-transparent {background-color:transparent!important;}
.bg-grey-light {background-color:#F7F7F7!important;}
.bg-red {background-color:#e61111!important;}
.bg-wine {background-color: #A02448!important;}
.bg-green {background-color: #005524!important;}
.bg-pink {background-color: #FFCCBD40!important;}

.btn.size_10 {width:10%!important;}
.btn.size_20 {width:220px!important;}
.btn.size_30 {width:30%!important;}
.btn.size_40 {width:40%!important;}
.btn.size_50 {width:50%!important;}
.btn.size_60 {width:60%!important;}
.btn.size_70 {width:70%!important;}
.btn.size_80 {width:80%!important;}
.btn.size_90 {width:90%!important;}
.btn.size_100 {width:100%!important;}



 /* RESET TEMPLATE ------------------------------------------------------*/



.component {padding:0!important;margin:0!important;}
.product-reco.component {margin-bottom:20px!important;}
body.basicpage {background-color: #ffffff!important;}




/* CUSTOM ------------------------------------------------------*/



.intro footer {    margin: 40px auto 40px auto;}
.intro p {width:50%;margin:0 auto;font-size:17px;}


/* tab nav */
.tab-pane {    padding: 0;}

#myTab {width: 45%; margin: 40px auto 0px auto;    justify-content: space-around;}

.nav-link.show {color:#0970E6;border-bottom:2px solid #0970E6;font-weight: bold; }

.nav-mytabs { margin-top: 2rem;}
 
.nav-mytabs li:not(:last-child) {margin-right: 7px;}

.nav-mytabs ul {    justify-content: space-around;}
 
.nav-mytabs a {
  position: relative;
  top: 4px;
 	padding: 10px 0!important;
   margin: 0 10px!important;
  border-radius: 2px 2px 0 0;
  background: white;
  color: black;
  opacity: 0.7;
	font-size:16px;
  transition: all 0.1s ease-in-out;
}
 
.nav-mytabs a.active, 
.nav-mytabs a:hover {
  opacity: 1;
  top: 0;
}

.nav-mytabs a { top: 0!important;}
 
.mytab-content {
  position: relative;
  z-index: 2;

  border-radius: 0 4px 4px 4px;
  background: white;
    padding: 40px 0 0 0;
    margin: 20px 0 0 0;

}

.infos  {margin: 20px auto;width: 40%;}
.infos li:last-child img {height:auto; width:370px;}
.infos li {align-self: stretch;}
.infos li:first-child img {margin: 0px 0 0 0;  height: auto;} 
#hyper .infos li:first-child img {  width: 100px;} 
#market .infos li:first-child img {width: 77px;}
#express .infos li:first-child img {width: 76px;}
#express  .infos li:first-child {width: 80%;}
#express.nl  .infos li:first-child {    width: 85%;}

.infos li:first-child {width: 100%;text-align: center;}
.infos li:last-child {width:90%;}
.infos li:last-child span {}
.infos li span.title {font-size: 28px;}
.infos li span.desc {font-size: 14px;}
.infos footer {bottom:0;width:100%;}
.infos.nl li:first-child {width: 80%;}

.services {  padding: 40px;margin-top: 20px;   }
.services li {padding:20px;}
.services ul { width: 80%;  margin: 0 auto;     align-items: flex-start!important;}
.services ul li .icon {font-size: 50px;}
.services ul li .icon.icon-apple {}



.services ul li span.title {   padding: 10px 0 10px 0;font-size:18px;}
.services ul li span.desc{  font-size:16px;}



.services  .icon-smile, .services  .icon-products {height: 50px; background-size: 57px 50px;}

.arguments {padding:40px;}
.arguments h2 {font-size:28px;}
.arguments header {background-color: transparent!important;padding:0 0 20px 0;}
.arguments ul {width:50%;margin:0 auto;padding: 40px;}
.arguments ul li:first-child {margin-right: 40px;width: 45%;}
.arguments ul li:last-child span:last-child {width:80%;font-size:16px;}

.arguments ul:nth-child(odd) li:first-child { order: 2;margin-left: 40px;width: 55%;}
.arguments ul:nth-child(odd) li:last-child {}

.drive {padding: 20px 0; margin: 0 auto 20px auto;}
.drive .icon {font-size: 40px;}

.drive ul {padding: 20px 0;width: 70%; margin:0 auto;}
.drive li:last-child {}
.drive li:nth-child(2) {padding: 0 20px 0 0;}
.drive li:first-child {    padding: 0 20px 0 0;}


.order {    margin: 0 0 20px 0;}
.order ul {       padding: 40px;
    width: 50%;
    margin: 0 auto;}
.order .icon {    font-size: 40px;}
.order li {}
.order li:nth-child(1){    padding: 0 20px 0 0;}
.order li:nth-child(2){    padding: 0 20px 0 0;}
.order li:nth-child(3){}
.order .title {text-align: left;}
.order .desc {text-align: left;}
.order footer {}
.order .btn {}

@media only screen and (max-width : 1280px) {
	
	.order ul {  width: 70%;}
	
	#myTab {width: 55%;}
	.services ul { width: 100%;}
	.infos, .arguments ul  { width: 60%;}
	.intro p {width: 80%;}
	.drive li {width:auto;}
		.btn.size_20 {width: 220px!important;}
}
	

@media only screen and (max-width : 1024px) {
	
	.order ul {  width: 100%;}
	
	#myTab {width: 65%;}
	
	.infos { width: 80%;}
	.arguments ul { width: 70%;}
	
	
	
.hide-for-mobile {display:none!important;}
.hide-for-desktop {display:block!important;}


}


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

	
	#myTab {width: 90%;margin:0 auto;}
	.arguments ul {width: 90%;}
	.infos li span.title {line-height: 1.35em;margin: 0 0 0px 0;font-size:20px;}
	.drive ul {width:80%;}
	

}

@media only screen and (max-width : 768px) {
	
	.infos li span.desc {line-height: 1.35em;}

}

@media only screen and (max-width : 660px) {
	
	
	.order ul {flex-direction: column}
	
	.order ul li {width: 100%!important;    padding: 0 0 20px 0!important;}
	.order .title, .order .desc {text-align: center;}
	
	.nav-mytabs a {    font-size: 13px;}
	
	.services ul {flex-direction: column;}
	
	.services li {position: relative;       padding: 0px 0px 100px 0;   width: 100%;}
	
	.services li  .wrapper {position: absolute;top: 0;left: 80px;width: 450px;}
	
	.services ul li span.title {    padding: 0px 0 0px 0;}
	
	.intro {   }
	
	
	.arguments ul {padding: 10px 0 40px 0;}
	.arguments ul li:first-child {width: 80%;}
	.arguments ul:nth-child(odd) li:first-child {width: 80%;}
	
	#myTab .nav-item {width:100%;text-align: center;border: 1px solid #eeeeee;}
	#myTab .nav-link  {    margin: 0!important;}
	
	.nav-link.show {border-bottom: 0px solid rgb(9, 112, 230);background-color: #0970E6;color: #fff;}
	.tab-pane ul {    flex-direction: column;}
	
	.infos.nl li:first-child,
	#express.nl .infos li:first-child {    width: 100%;}
	
	.infos {flex-direction: column;    width: 90%;}
	.infos li:first-child, 	#express .infos li:first-child{width: 100%;margin: 0 0 20px 0;}
	.infos li span.title {font-size:28px;}
	.infos li span.title, .infos li span.desc{text-align: center!important;}
	.infos footer {position: inherit;margin: 20px 0 0 0;}
	
	.infos li:last-child {width:100%;}
	.infos li:last-child img {width:100%;}
	
	
	.drive ul {flex-direction: column;}
	.drive ul li {width:100%;padding:0;}
	.drive li:nth-child(2) {margin: 20px 0;}
	.drive ul li span.title, .drive ul li span.desc {text-align: center!important;}
	
	.nav-mytabs li:not(:last-child) { margin: 0!important;}
	#myTab {    margin-bottom: 20px;}
}
	

@media only screen and (max-width : 480px) {
.order ul {padding: 10px;}
	
	.arguments ul {flex-direction: column;}
	
.arguments ul:nth-child(odd) li:first-child { order:0;}
	.arguments ul li:first-child, .arguments ul:nth-child(odd) li:first-child {width: 40%;margin: 0 0 40px 0;}
	.arguments ul li:last-child span:last-child , .arguments ul li:last-child span:first-child {text-align: center!important;}
	.arguments ul li:last-child span:last-child {width:100%;}
	
	
	.services li .wrapper {  width: 280px;
    left: 50px;
    line-height: 1.30em;}
	.services ul li .icon {font-size: 40px;}
	.services .icon-smile, .services .icon-products {background-size: 40px 50px;
}
	.services .icon-delivery-carrefour-fast{font-size: 30px!important;}
	.services ul li span.title {font-size: 17px;padding: 0 0 5px 0;}
	.services ul li span.desc {font-size: 15px;}
	/*
	.services ul li .icon, .services ul li span.title, .services ul li span.desc{text-align: center!important;}
	.services ul li .icon {font-size: 50px;}
	
	.services .icon-smile, .services .icon-products { 
		    height: 50px;
		background-size: 50px!important;
		background-position: center top;
}
	
	*/
	
	.intro p  {    font-size: 14px;}
	
	

}

@media only screen and (max-width : 375px) {
	.services {padding:20px!important;}
	.services .icon-delivery-carrefour-fast {
    font-size: 25px!important;
}
}