/* //////////////////////////////////////////////////////////////////
//////////////////////.   MEDIA QUERIES   .//////////////////////////////////////////// */
@media all and ( max-width : 375px ){

		.small {
			display: visible;
		}

		.large {
			display: none;
		}


		.header {
			grid-area: header;
			width: auto;
			height: auto;
			display: grid;
			grid-template-areas:
				"avatar"
				"presentation "
				"infos"
				;
			grid-template-rows: auto auto auto;
			grid-template-columns: auto;
		}

		.verticalalign-c {
			grid-area: avatar;
		}

		.resize {
			flex: auto;
			min-width: 100px;
			width: 250px;
			height: auto;
			padding-top: 40px;
			padding-bottom: 40px;
		}

		#presentation p {
			padding: 20px 30px 20px 30px;
		}

		.verticalalign-l {
			display: none;
		}

		#infos {
			text-align: center;
			padding: 0;
		}

		#infos img {
			width: 40px;
			height: 40px;
			padding-top: 30px;
			padding-right: 0px;
			padding-left: 0px;
		}

		#infos h2 {
			padding-bottom: 15px;
			padding-left: 0px;
			text-align: center;
			display: block;
		}

		#infos p {
			padding-left: 0;
			padding-right: 0;
			text-align: center;
			width: auto;
		}

/*
		#nav ul li{
			padding-bottom: 15px;
			padding-top: 15px;
		}

		.fixed-nav #nav {
		  position: fixed;
		  top:0;
		  z-index: 1;
		}
*/
		#nav-responsive {
			width: 100%;
			cursor: pointer;
			font-size: 1em;
			color: #FFF;
			text-align: center;
			border-bottom: 1px solid #FFF;
		}


		.navbar-toggle {
		    position: relative;
		    cursor: pointer;
		    color: rgba(255,255,255);
		    font-size: 30px;
				display: block !important;
		}
		.main-nav {
		    list-style-type: none;
		    display: none;
		}
		.active {
		  display: block;
		}


		hr {
		width: auto;
		margin: auto;
		margin-bottom: 15px;
		margin-top: 15px;
		text-align: center;
		text-decoration: none;
		border: 0;
		height: 1px;
		background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		} /* barre de séparation entre professions */

		#professions {
			width: auto;
			margin: auto;
			text-align: center;
			padding: 10px 10px 10px 10px;
		}

		#professions img {
			padding-top: 15px;
			padding-left: 0px;
			padding-right: 0px;
		}

		.text {
			width: auto;
			text-align: center;
			padding-left: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
			margin-right: 0px;
		}

		#parcours {
			width: auto;
			margin: auto;
			text-align: center;
			padding: 10px 10px 10px 10px;
		}

		#parcours img {
			padding-top: 15px;
			padding-left: 0px;
			padding-right: 0px;
			margin: auto;
			display: block;
		}

		#loisirs {
			width: auto;
			margin: auto;
			text-align: center;
			padding: 10px 10px 10px 10px;
		}

		#loisirs img {
			padding-top: 15px;
			padding-left: 0px;
			padding-right: 0px;
			margin: auto;
			display: block;
		}
} /*@media all and ( max-width : 737px ) */






@media all and ( min-width : 376px) and ( max-width : 737px ){

		.small {
			display: visible;
		}

		.large {
			display: none;
		}


		.header {
			grid-area: header;
			width: auto;
			height: auto;
			display: grid;
			grid-template-areas:
				"avatar avatar"
				"presentation presentation"
				"profil infos"
				;
			grid-template-rows: auto auto auto;
			grid-template-columns: auto auto;
		}

		.verticalalign-c {
			grid-area: avatar;
		}

		.resize {
			flex: auto;
			width: 250px;
			height: 250px;
			padding-top: 40px;
			padding-bottom: 40px;
		}

		#presentation p {
			padding: 20px 30px 20px 30px;
		}

		.profil {
			text-align: center;
		}

		.profil img {
			width: 40px;
			height: 40px;
			padding-top: 44px;
			padding-right: 0px;
			padding-left: 0px;
			margin-right: auto;
			margin-left: auto;
			text-align: center;
		}

		.profil h2 {
			padding-bottom: 15px;
			text-align: center;
			display: block;
			padding-right: 0px;
		}

		.dg1 p, .dg2 p, .dg3 p, .dg4 p{
			text-align: center;
			padding-left: 30px;
			padding-right: 30px;
			margin-left: auto;
			margin-right: auto;
		}

		.dg1 ul li, .dg2 ul li, .dg3 ul li, .dg4 ul li{
			text-align: center;
			padding-left: 0px;
			padding-right: 0px;
			margin-left: auto;
			margin-right: auto;
		}

		.line1 ul, .line2 ul, .line3 ul, .line4 ul,{
			text-align: center;
			padding-left: 0px;
			padding-right: 0px;
			margin-left: auto;
			margin-right: auto;
		}

		#infos {
			text-align: center;
			overflow-wrap: normal;
		}

		#infos img {
			width: 40px;
			height: 40px;
			padding-top: 0px;
			padding-right: 0px;
			padding-left: 0px;
			margin-right: auto;
			margin-left: auto;
			text-align: center;
		}

		#infos h2 {
			padding-bottom: 15px;
			padding-left: 0px;
			text-align: center;
			display: block;
		}

		#infos p {
			padding-left: 0;
			padding-right: 0;
			text-align: center;
			width: auto;
		}


		#nav-responsive ul li{
			padding-bottom: 15px;
			padding-top: 15px;
		}

		.navbar-toggle {
		    position: relative;
		    cursor: pointer;
		    color: rgba(255,255,255);
		    font-size: 30px;
				display: block !important;
		}
		.main-nav {
		    list-style-type: none;
		    display: none;
		}
		.active {
		  display: block;
		}

		hr {
		width: auto;
		margin: auto;
		margin-bottom: 15px;
		margin-top: 15px;
		text-align: center;
		text-decoration: none;
		border: 0;
		height: 1px;
		background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
		} /* barre de séparation entre professions */

		#professions {
			width: auto;
			margin: auto;
			text-align: center;
			padding: 10px 0 0 0;
		}

		#professions img {
			padding-top: 15px;
			padding-left: 0px;
			padding-right: 0px;
			margin-right: auto;
			margin-left: auto;
			text-align: center;
			display: block;
		}

		#professions h2 {
			padding-bottom: 15px;
			text-align: center;
		}

		#professions h4 {
			padding-top: : 15px;
			padding-bottom: 15px;
			text-align: center;
		}

		.text {
			width: auto;
			text-align: center;
			padding-left: 30px;
			padding-right: 30px;
			padding-bottom: 30px;
			margin-right: 0px;
		}

		#parcours {
			width: auto;
			margin: auto;
			display: initial;
			text-align: center;
			padding: 10px 0 0 0;
		}

		#parcours img {
			padding-top: 15px;
			padding-left: 0px;
			padding-right: 0px;
			margin: auto;
			display: block;
		}

		#parcours h2 {
			padding-bottom: 15px;
			text-align: center;
		}

		#parcours h4 {
			padding-top: : 15px;
			padding-bottom: 15px;
			text-align: center;
		}

		#loisirs {
			width: auto;
			margin: auto;
			display: initial;
			text-align: center;
			padding: 10px 0 0 0;
		}

		#loisirs img {
			padding-top: 15px;
			padding-left: 0px;
			padding-right: 0px;
			margin: auto;
			display: block;
		}

		#loisirs h2 {
			padding-bottom: 15px;
			text-align: center;
		}
} /*@media all and ( min-width : 376px) and ( max-width : 737px ) */







@media all and ( min-width : 738px){
		.small {
			display: none;
		}

		.large {
			display: visible;
		}			}

		.navbar-toggle {
				display: none;
		}

		.sectiongrid {
			width: auto;
		}


} /*@media all and (min-width : 738px ) */