/* codes couleur */
.bleu{color:#005996;}
.brun{color:#a6572f;}
.gris{color:#6c6c6c;}
.grisPale{color:#a7a9ac;}

/* margin */
.marginL5{margin-left:5px;}
.marginL10{margin-left:10px;}
.marginL20{margin-left:20px;}
.marginL25{margin-left:25px;}
.marginL30{margin-left:30px;}
.marginL40{margin-left:40px;}
.marginL310{margin-left:310px;}

.marginR10{margin-right:10px;}
.marginR20{margin-right:20px;}

.marginT10{margin-top:10px;}
.marginT20{margin-top:20px;}
.marginT30{margin-top:30px;}
.marginT40{margin-top:40px;}

.marginB10{margin-bottom:5px;}
.marginB20{margin-bottom:20px;}

/* autres éléments */
.separation{ border-left: solid 1px #404040; min-height:200px;}

.lienTexte a{ color: #f37528; text-decoration:none;}
.lienTexte a:hover{ color: #f8f8f8; text-decoration:none;}

.centered-content{
	max-width:100%;
	margin-left:auto;
	margin-right:auto;}

.strong{
	font: bold 13px/30px sans-serif;
}



/* TOP */

.bgTop{ 
	/*background-color:#fff;*/
	margin-bottom: 10px;
}



.topArticlecontent{padding-left: 20px; padding-right: 40px;}
.topArticlecontent-mobile{}

.bg-top h1{color:#f8f8f8; font-size:32px; text-transform:uppercase; font-weight:bold; text-align:center;}
.bg-top h2{color:#f8f8f8; font-size:24px; font-weight: 400; text-align:center;}
.logo img{ width:100%; padding:20px 20px 20px 40px;text-align: center;}
.logo p{ text-align: center;}
.titleTop h1{ color:#fff; text-align: center; margin-top: 60px; padding:10px 0px 5px 0px; font-size: 28pt; background-color:#b3d334; text-transform:uppercase;}
	@media (max-width:1280px){
	.titleTop h1{ color:#fff; text-align: center; margin-top: 40px; padding:20px 0px 5px 0px; font-size: 75%; background-color:#b3d334; text-transform:uppercase;}
	}
	@media (max-width:768px){
	.titleTop h1{ color:#fff; text-align: center; margin-top: 20px; padding:20px 0px 5px 0px; font-size: 100%; background-color:#b3d334; text-transform:uppercase;}
	}
	@media (max-width:320px){
	.titleTop h1{ color:#fff; text-align: center; margin-top: 20px; padding:20px 0px 5px 0px; font-size: 65%; background-color:#b3d334; text-transform:uppercase;}
	}

.company p{text-align: center; width: 100%; font-size: 12pt; padding: 18px 0px 10px 10px; }

	@media (max-width:1280px){
		.company p{text-align: center; width: 100%; margin-bottom: 20px; padding: 10px; font-size: 16pt;}
	}

.btnCompany p{
    padding: 18px 10px 10px 10px;
	margin-left: 20px;
}

.company a{color: #000;}
.company a:hover{color: white; text-decoration: none;}


/* recherche produit pc */
.recherche-input-div{
	text-align:left;
	padding-top: 91px;
}
.recherche-input{
	height:75px;
	border:1px solid #AFAFAF;
	border-radius: 10px;
	width:100%;
	padding: 30px 10px 30px 10px;
}

#recherche-searchdiv{
	width:100%;
	/*margin:0 auto;*/
	background-color:white;
	border:1px solid white;
	position:relative;
}
.recherche-main-split-right #recherche-searchdiv{
	width:100%;
}
.recherche-main-split-right .recherche-input{
	width:325px;
}

.search-magnifier{
	background-color:transparent;
	border:none;
	position:absolute;
	right:9px;
	top:27px;
	cursor:pointer;
	float:right;
	width:30px;
	height:30px;
	background-size:cover;
	background:url("/public/web/images/recherche.png") no-repeat;
}


@media (max-width:768px){
.telephoneTop p{ text-align: right; padding-top: 45px; padding-right: 20px; font-size: 100%;}

/* recherche produit pc */
.recherche-input-div{
	text-align:left;
	padding-top: 55px;
}
.recherche-input{
	height:75px;
	border:1px solid #AFAFAF;
	border-radius: 10px;
	width:100%;
	padding: 30px 10px 30px 10px;
}

#recherche-searchdiv{
	width:100%;
	/*margin:0 auto;*/
	background-color:white;
	border:1px solid white;
	position:relative;
}
.recherche-main-split-right #recherche-searchdiv{
	width:100%;
}
.recherche-main-split-right .recherche-input{
	width:325px;
}

.search-magnifier{
	background-color:transparent;
	border:none;
	position:absolute;
	right:9px;
	top:27px;
	cursor:pointer;
	float:right;
	width:30px;
	height:30px;
	background-size:cover;
	background:url("/public/web/images/recherche.png") no-repeat;
}
}





/* recherche produit mobile */
.recherche-input-div{
	text-align:left;
	padding-top: 0px;
}
.recherche-input{
	height:40px;
	border:1px solid #AFAFAF;
	border-radius: 10px;
	width:100%;
	padding: 22px 10px 22px 10px;
}

#recherche-searchdiv{
	width:100%;
	/*margin:0 auto;*/
	background-color:white;
	border:1px solid white;
	position:relative;
}
.recherche-main-split-right #recherche-searchdiv{
	width:100%;
}
.recherche-main-split-right .recherche-input{
	width:325px;
}

.search-magnifier{
	background-color:transparent;
	border:none;
	position:absolute;
	right:20px;
	top:10px;
	cursor:pointer;
	float:right;
	width:30px;
	height:30px;
	background-size:cover;
	background:url("/public/web/images/recherche.png") no-repeat;
}

.articlecontent{
	margin-top:40px;
}

.articlecontent p{
	margin-left:0px;
	padding-left: 0px;
	padding-right: 30px;
	text-align:justify;
}

	@media (max-width:768px){
	.articlecontent p{ margin-left:30px; padding-right: 20px;}
	}

.articlecontent>ul>li{
	list-style-type:disc;
	margin-left:20px;
}

.articlecontent h1{
	padding:20px 0px 20px 0px;	
	font-size:28px;
	font-weight:bold;
	color:#0d353a;
}
	@media (max-width:768px){
	.articlecontent h1{ font-size:200%; margin-left:30px;}
	}
	@media (max-width:320px){
	.articlecontent h1{ font-size:150%; margin-left:30px;}
	}

.articlecontent h2{
	padding:0px 0px 10px 0px;
	font-size:22px;
	color: #f99c1b;
	font-weight: bold;
}
	@media (max-width:1280px){
	.articlecontent h2{ font-size:22px;}
	}
	@media (max-width:768px){
	.articlecontent h2{ font-size:22px;}
	}
	@media (max-width:320px){
	.articlecontent h2{ font-size:22px;}
	}


.articlecontent h3{
	margin-top:40px;
	font-size:20pt;
	text-transform:none;
	font-weight:700;
	color: #fff;
	padding: 15px 15px 15px 15px;
	background-color:#303030;
}

	@media (max-width:1280px){
	.articlecontent h3{ font-size:20pt;}
	}
	@media (max-width:768px){
	.articlecontent h3{ font-size:85%;}
	}
	@media (max-width:320px){
	.articlecontent h3{ font-size:85%;}
	}

.articlecontent h4{
	font-size:18pt;
	font-weight:bold;
}

/*.articlecontent hr{ border-top: solid 1px #6c6c6c;}*/

.buttonJoinNow p{
	color: white;
    background-color: #7c7c7c;
    padding-left: 10px;
    padding-right: 10px;
	text-align: center;
	font-size: 16pt;
	width:97%;
	text-decoration: none;
}

	@media (max-width:768px){
		.buttonJoinNow p{
			width:91%;
		}
	}
	@media (max-width:480px){
		.buttonJoinNow p{
			width:85%;
		}
	}

	@media (max-width:320px){
		.buttonJoinNow p{
			width:85%;
		}
	}



.teaserAccueil img{width: 60%;}


.teaserAccueil h2{
	padding:12px 0px 0px 0px;
	font-size:45px;
	color: #a6572f;
	font-weight: bold;
	margin-bottom: 40px;
	position: relative;
	right: 30px;
}

@media (max-width:768px){
.teaserAccueil img{width: 100%; padding-top: 20px; padding-right: 50px;}
}

@media (max-width:768px){
.teaserAccueil img{width: 100%; padding-top: 15px; padding-right: 50px;}
}

@media (max-width:360px){
.teaserAccueil img{width: 100%; padding-top: 0px;}
.teaserAccueil h2{
	padding:0px 0px 0px 0px;
	font-size:30px;
	color: #a6572f;
	font-weight: bold;
	margin-bottom: 40px;
	position: relative;
	right: 20px;
}
}

.teaserAccueil h3{
	padding:0px 0px 20px 0px;
	font-size:55px;
	color: #6c6c6c;
	font-weight:normal;
	margin-top: 5px;
}
.teaserAccueilPlus p{
	font-size:35px;
	color: #fff;
	font-weight:bold;
	font-style: italic;
	background-color: #005996;
	padding: 10px;
	text-align: center;
	margin-bottom: 0px;
	margin-top: 20px;
}
@media (max-width:360px){
.teaserAccueilPlus p{
	font-size:25px;
	color: #fff;
	font-weight:bold;
	font-style: italic;
	background-color: #005996;
	padding: 10px;
	text-align: center;
	margin-bottom: 0px;
	margin-top: 20px;
}
}


.teaserAccueil a:hover{
	text-decoration: none;
}

.bgGrisPale{ background-color: #efeded; padding-top: 50px;}
.bgBlanc{ background-color: #fff; padding-top: 50px;}
.bgRouille{ background-color: #a6572f; padding-top: 50px; padding-bottom: 50px;}
.bgRouille h2{ color: #fff;}
.bgRouille h3{ color: #fff;}
.bgRouille p{ color: #fff;}

.bgPhoto{ background:url("/public/web/images/photo-equipe-grb.jpg") no-repeat; background-size: cover; padding-top: 50px; padding-bottom: 50px; width: 100%;}
.bgPhoto h2{ color: #fff;}
.bgPhoto h3{ color: #fff;}
.bgPhoto p{ color: #fff;}

.imageCat {
	max-height: 100%;
}
.imageCat img{
	/*position: absolute;*/
	width: 100%;
	max-height: 100%;
	padding: 0px;
	margin: 0px;
}
.imageCat h3{
	background:url("/public/web/images/bg-title.png") repeat;
	/*position: relative;
	top: 223px;*/
	width: 100%;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
}

@media (max-width:480px){
.imageCat h3{
	background:url("/public/web/images/bg-title.png") repeat;
	/*position: relative;
	top: 223px;*/
	width: 100%;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 50%;
	margin-top: 0px;
	margin-bottom: 0px;
}
}

.imageCat a{
	color: #fff;
}
.imageCat a:hover{
	color: #fff;
}

.blogue{
	border: solid 1px #d4d4d8;
	border-radius: 10px;
	width: 30%;
	margin: 10px 10px 20px 25px;
}

@media (max-width:768px){
.blogue{
	border: solid 1px #6c6c6c;
	border-radius: 10px;
	width: 100%;
	margin: 10px 20px 20px 0px;
}
}
.blogue img{
	padding: 10px 10px 10px 10px;
	width: 100%;
	border-bottom: solid 1px #a7a9ac;
	border-width: 90%;
}
.blogue h3{
	font-size: 20pt;
	font-weight: bold;
	color: #005996;
	padding: 0px 10px 0px 10px;
	margin-bottom: 0px;
}
.blogue p{
	padding: 0px 10px 0px 10px;
}


.bloguePage{
	border: solid 1px #d4d4d8;
	border-radius: 10px;
	margin: 10px 0px 10px 0px;
}

.blogueDet{
	border: solid 0px #d4d4d8;
	border-radius: 10px;
	margin: 10px 0px 10px 0px;
}


@media (max-width:768px){
	.bloguePage{
		border: solid 1px #d4d4d8;
		border-radius: 10px;
		width: 100%;
		margin: 40px 20px 20px 0px;
	}
	.blogueDet{
		border: solid 0px #d4d4d8;
		border-radius: 10px;
		margin: 10px 0px 10px 0px;
	}
}

.bloguePage img{
	padding: 10px 10px 10px 10px;
	width: 100%;
	border-bottom: solid 1px #a7a9ac;
	border-width: 90%;
}

.bloguePage h3{
	font-size: 20pt;
	font-weight: bold;
	color: #005996;
	padding: 0px 10px 0px 10px;
	margin-bottom: 0px;
}

.bloguePage h4{
	font-weight: bold;
	padding: 0px 10px 0px 10px;
	margin-bottom: 0px;
}
.bloguePage h4 a{
	color: #6c6c6c;
	font-weight: bold;
	margin-bottom: 0px;
}
.bloguePage h4 a:hover{
	color: #005996;
	font-weight: bold;
	margin-bottom: 0px;
	text-decoration: none;
}


.bloguePage p{
	padding: 0px 10px 0px 10px;
}

.bloguePageCat{
	width: 23%;
	padding: 0px;
	border: solid 1px #d4d4d8;
	border-radius: 10px;
	margin-left: 28px;
	margin-top: 10px;
}

.bloguePageCat ul{
	padding: 10px 0px 10px 0px;
	margin-bottom: 0px;
}

.bloguePageCat li{
    border-bottom: solid 1px #6c6c6c;
	line-height: 30px;
}

.bloguePageCat li>a{
	display: block;
	padding: 20px 10px 20px 35px;
	color: #6c6c6c;
}
.bloguePageCat li>a:hover, .bloguePageCat li>a:active, .bloguePageCat li>a:focus{
	display: block;
	padding: 20px 10px 20px 35px;
	color: #fff;
	background-color: #005996;
	text-decoration: none;
	background-image: url(/public/web/images/fleche-categorie.png);
	background-repeat: no-repeat;
	background-position: 5px;
	background-size: 25px;
}
@media (max-width:768px){
	.bloguePageCat{
		width: 100%;
		padding: 0px;
		border: solid 1px #d4d4d8;
		border-radius: 10px;
		margin-left: 0px;
		margin-top: 10px;
	}
	.bloguePageCat li{
		border-bottom: solid 0px #6c6c6c;
		line-height: 30px;
	}
}


.carriere{
	border-left: solid 1px #6c6c6c;
	width: 30%;
	margin: 10px 20px 20px 0px;
}

@media (max-width:768px){
	.carriere{
		border-left: solid 1px #6c6c6c;
		width: 100%;
		margin: 10px 20px 20px 0px;
	}
}
.carriere h3{
	font-size: 18pt;
	font-weight: bold;
	color: #fff;
	padding: 0px 10px 0px 40px;
	margin-bottom: 0px;
}
.carriere h4{
	font-size: 18pt;
	font-weight: bold;
	color: #fff;
	padding: 10px 10px 0px 40px;
	margin-bottom: 0px;
	background-color: transparent;
	text-align: left;
	font-style: normal;
}
.carriere p{
	padding: 0px 10px 0px 40px;
}
.carriere a{
	color: #fff;
}
.carriere a:hover{
	color: #6c6c6c;
}


.temoignages{
	
	/*background-image: url(/public/web/images/quote-temoignage-gris.png);
	background-size:auto;
	background-position: right top;
	background-repeat: no-repeat;*/
	margin: 10px 20px 40px 0px;
	/*min-height: 300px;*/
}
@media (max-width:768px){
.temoignages{
	/*background-image: url(/public/web/images/quote-temoignage-blanc.png);
	background-size:auto;
	background-position: right;
	background-repeat: no-repeat;*/
	margin: 10px 20px 40px 0px;
	/*min-height: 200px;*/
}
}
.temoignages h4{
	font-size: 22pt;
	font-weight: bold;
	color: #6c6c6c;
	padding: 0px 10px 0px 40px;
	margin-bottom: 0px;
	background-color: transparent;
	text-align: right;
	font-style: italic;
}
.temoignages p{
	padding: 0px 0px 0px 0px;
}

.temoignagesTous p{
	padding: 0px 0px 0px 40px;
	text-align: right;
}

.temoignages img{
	padding: 0px 10px 0px 40px;
	width: 100%;
}

.catalogue img{
	padding: 40px 20px 0px 20px;
	width: 100%;
}
.catalogue h2{
	font-size: 20pt;
	padding-top: 0px;
	text-align: center;
}

.formContent {
    margin-top: 0px;
}


@media (max-width:768px){
.formContent{margin-left:30px; width:91%;}
}
@media (max-width:320px){
.formContent{margin-left:30px; width:83%;}
}

.formContent h1 {
    margin: 0px 0px 0px 0px;
	padding:0px 0px 20px 0px;
}

.formContent p {
    margin: 10px 0px 0px 0px;
	text-align:left;
}
.formContent input {
    padding: 10px;
    /*border: 1px solid #0d343b;*/
	width: 100%;
	font-size:90%;
	margin-left:0px;
	margin-bottom:20px;
}

	@media (max-width:768px){
		.formContent input {
			width: 95%;
		}
	}

.formContent textarea {
    padding: 5px;
	width: 100%;
}

	@media (max-width:768px){
		.formContent textarea {
			width: 95%;
		}
	}

input[type=submit] {
    color: white;
    background-color: #0d343b;
    padding-left: 10px;
    padding-right: 10px;
	text-align: center;
	font-size: 16pt;
	width:100%;
}
	@media (max-width:768px){
	input[type=submit]{width:95%; font-size: 150%; margin-left:0px;}
	}
	@media (max-width:320px){
	input[type=submit]{width:95%; font-size: 150%; margin-left:0px;}
	}


.produits h2{
	background-color: #a25231;
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	padding: 10px;
}
.produits h3{
	color: #6c6c6c;
	font-size: 30pt;
	margin-top: 40px;
}

.produits ul li{
	list-style-type:circle !important;
}
.produits img{
	width: 100%;
	margin-top: 20px;
	padding-right: 40px;
}
.produits hr{
	border-bottom: solid 1px #d4d4d4;
	margin-top: 40px;
}

/* FOOTER */

.footer{ 
	background-color: #005996;
	min-height:198px; 
	padding:20px;
	border-top: solid 5px #a6572f;
}

.footerContent{	
	margin-top: 10px;
	padding-left: 20px;
	color: #fff;
}

.footerContent h4 {	
	padding:0px 0px 0px 0px;
	color: #fff;
	font-size:25pt;
	font-weight: bold;
}
@media (max-width:360px){
.footerContent h4 {	
	padding:0px 0px 0px 0px;
	color: #fff;
	font-size:13pt;
	font-weight: bold;
}
}

.footerContent p {	
	padding:0px 0px 0px 0px;
	font-size:20pt;
	color: white;
}
	.footerContent a{
		color: #fff;
		text-decoration:none;
	}
	.footerContent a:hover{
		color: #abd6e9;
		text-decoration:none;
	}

@media (max-width:360px){
.footerContent p {	
	padding:0px 0px 0px 0px;
	font-size:15pt;
	color: white;
}
}

.footerContent img{
	width:100%;
	padding:5px 20px 0px 0px;
}

.writeUs p{
	background-color: #fff;
	padding: 10px;
	color: #005996;
	text-align: center;
	border-radius: 10px;
}
@media (max-width:768px){
.writeUs p{
	background-color: #fff;
	padding: 10px;
	color: #005996;
	text-align: center;
	border-radius: 10px;
	margin-top: 20px;
}
}

.xosharelink img {
    max-width: 60px;
    padding: 10px 10px 10px 10px;
}

.infolettre input{ padding-left: 10px; width: 100%; height: 39px; color: #6c6c6c;}

.linkbutton {
	padding-left:5px;
	cursor:pointer;
	background-color: #e5e6e6;
}
.linkbutton h5 {font-size:22px; text-align: center; border:0px solid rgb(169, 169, 169); padding:0px; margin-top: 8px; margin-bottom: 7px;}
	.linkbutton h5 a { color:#6c6c6c;}
	.linkbutton h5 a:hover{ color:#abd6e9;}

.modesPaiement img{ width: 125px; padding-right: 20px;}

.copyright{text-align: center; margin-top: 10px;}






.adresse{
	position: relative;
	top: -15px;
	left: 200px;
	text-align: right;
	color: #08304d;
}
.adresse h1{
	padding-right: 20px;
	font-size: 20px;
	text-transform: uppercase;
}
.adresse p{
	padding-right: 20px;
	font-size: 18px;
}
.adresse td{
	padding-right: 20px;
	font-size: 18px;
}

.adresse-mobile{
	text-align: right;
	color: #08304d;
}
.adresse-mobile h1{
	padding-right: 20px;
	font-size: 20px;
	text-transform: uppercase;
}
.adresse-mobile p{
	padding-right: 20px;
	font-size: 18px;
}
.adresse-mobile td{
	padding-right: 20px;
	font-size: 18px;
}



.slidercontainer{
	position:relative;
	height:100%;
	margin-right:0px;
}

.slidertxtdiv{
    position: absolute;
    top: 0px;
	left: 0px;
}


.slideshowTitle h1{
    color: #fff;
    font-size: 30pt;
	text-transform:uppercase;
    width: 100%;
	padding:15px;
	text-align:center;
}

.slideshowDesc p{
	background-image: url('/public/web/images/bg-slider.png');
	background-repeat:repeat;
    color: #f8f8f8;
    width: 100%;
	padding:10px;
	text-align:center;
}

.langue { text-align:right;}
	.langue a{ padding-right:40px; color:#f8f8f8;}
	.langue a:hover{ padding-right:40px; color:#f58c1f;}
	
	@media (max-width:768px){
		.langue a{ padding-right:20px;}
		.langue a:hover{ padding-right:20px;}
	}
	
	.menu a{ text-decoration:none;}

/* CONTENT */

.blocs img{ max-width:78px; padding:0px 0px 0px 8px;}
.langueContent{ padding-right:10px; text-transform:uppercase; font-size:12px;}
.langueContent a{ /*padding-right:40px;*/ color:#303030;}
.langueContent a:hover{ /*padding-right:40px;*/ color:#f58c1f;}






.paddingL40{ padding-left:40px;}
.paddingL80{ padding-left:80px;}
.paddingT20{ padding-top:20px;}
.paddingR20{ padding-right:20px;}

	@media (max-width:768px){
		.paddingL80{ padding-left:40px;}
	}

.bgTexte{ 
	background-color:#fff; 
	padding: 20px 20px 20px 20px; 
	box-shadow: 8px 8px 12px #aaa;
	margin-bottom:40px;
}

.photo{
	margin: 0px 50px 20px 20px; 
	max-width:250px;
	height:100%;
}


.texte p{
	margin: 0px 0px 20px 20px; 
}

.texte table{
	margin: 0px 0px 20px 20px; 
}

.texte h1{
	color:#026479;
	font-size:24px;
	text-transform:none;
	margin: 0px 0px 20px 20px; 
}

.texte h2{
	color:#026479;
	font-size:18px;
	text-transform:none;
	margin: 0px 0px 20px 20px; 
}

.texte h3{
	color:#535353;
	font-size:16px;
	text-transform:none;
	margin: 0px 0px 20px 20px; 
}

.pageNum{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:16px; 
	color:#535353;
	text-align:center;
	margin-top:40px;
}


.google-maps {
	position: relative;
	padding-bottom: 34%;
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	max-height: 400px !important;
}

.moreInformation{
	border-bottom:solid 10px #0b1e42; 
}

.moreInformation h2{
	background-color:#0b1e42;
	padding:15px 15px 10px 15px;
	text-align:center;
	color:#f8f8f8;
	font-size:16px;
	text-transform:uppercase;
	margin-bottom:0px;
}

.moreInformation h2 a{
	color:#f8f8f8;
}

.moreInformation h2 a:hover{
	color:#ebebeb;
}


.formContact{ 
	min-height:100px; 
	padding-top:20px; 
}

.formClr {
	clear:both;
	display: block;
}
.labelrequired{
	color:#ee2327;
}
.textRight{ text-align:right;}



.hide-bullets {
    list-style:none;
    margin-left: -40px;
    margin-top:20px;
}

.thumbnail {
    padding: 0;
}

.carousel-inner>.item>img, .carousel-inner>.item>a>img {
    width: 100%;
}

.Tjustify {
	text-align:justify;
}

::placeholder {
font-size: 10pt;
}


.img-container-grand {
    float: left;
    width: 90%;
    padding: 5px;
}
.img-container {
    float: left;
    width: 45%;
    padding: 5px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}