/*  BACKGROUND  /////////////////////////////////////////////////////////// */

.bg-grey {
	background-color:#eee;
}

.bg-white {
	background-color:#fff;
}

.bg-yellow {
	background-color:#ba9c54;
}

.bg-dark-grey {
	background-color:#222;
}

.bg-black {
	background-color:#000;
}



/*  PAGE  /////////////////////////////////////////////////////////// */

main {
	padding-top:9em;
	padding-bottom:2em;
	background-color:#fff
}

.page {
	box-sizing:border-box;
	display:block;
	max-width:980px;
	margin:0 auto;
	clear:both;
}

.page.padding {
	padding:2em 0;
}

.page.padding.full {
	padding:2em 0.625em;
}

.page.padding.full-min-bottom {
	padding:2em 0.625em 0.625em 0.625em ;
}

.page.padding.full-big-bottom {
	padding:2em 0.625em 3em 0.625em ;
}

.page.padding.bottom {
	padding:0 0 2em 0;
}

.page.border {
	border-left:solid 1px #000;
	border-right:solid 1px #000;
}

.page.border-top {
	position:relative;
}

.page.border-top:before {
	content:'';
	position:absolute;
	display:block;
	top:0;
	left:0;
	margin:0 1.25em;
	height:1px;
	width:calc(100% - 2.5em);
	background-color:#ddd;
	border-bottom:solid 1px #fff;
}

/*  COLONNES  /////////////////////////////////////////////////////////// */

.col {
	box-sizing:border-box;
	float:left;
}

.col.full {
	width:100%;
}

.col.large {
	width:68%;
}

.col.medium {
	width:49%;
}



.col.small {
	width:30%;
}

.col.x-small {
	width:25%;
}

.col.mb2 {
	margin-bottom:2em;
}

.col.padding {
	padding:1.25em;
}

.col.marginright {
	margin-right:2%;
}

/*  BLOCS /////////////////////////////////////////////////////////// */

.bloc {
	background-color:#fff;
	padding:1.25em;
	margin-bottom:1.25em;
}

.bloc.bg {
	background-color:#eee;
}
.bloc.grey {
	background-color:#f6f6f6;
	border:solid 1px #ddd
}


/*  SUB COL /////////////////////////////////////////////////////////// */

.sub-col {
	float:left;
	width:49%
}
.sub-col.marginright {
	margin-right:2%;
}



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 TABLETTE //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


@media only screen and (max-width: 1023px){
	
/*  PAGE /////////////////////////////////////////////////////////// */

main {
	padding-top:8em;
}


.page {
	max-width:100%;
	margin:0 1.25em
}	

.page.border {
	border-left:none;
	border-right:none;
	max-width:100%;
	margin:0
}

/*  COLONNES  /////////////////////////////////////////////////////////// */

.col.large {
	width:100%;
}

/*  CHAPO  /////////////////////////////////////////////////////////// */

.chapo {
	margin:3%;
	font-size:1em;
	line-height:1.375em;
}



	
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 SMARTPHONE //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


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


/*  PAGE /////////////////////////////////////////////////////////// */

main {
	padding-top:4em;
}

.page {
	max-width:100%;
	margin:0
}	

/*  COLONNES  /////////////////////////////////////////////////////////// */

.col {
	float:none;
}

.col.medium {
	width:100%;
}

/*  BLOCS /////////////////////////////////////////////////////////// */

.bloc {
	padding:1.25em;
	margin-bottom:0.5em;
	border:solid 1px #eee;
}


}