@charset "UTF-8";
body{text-align:center;}
.nodisplay{display:none;}
#spinner-news{position:absolute;margin:-25px 0 0 -25px;height:50px;width:50px;background-size:50px 50px;}
a, a:visited{text-decoration: none;color:#000;}
a:hover, a:active{text-decoration: underline;}
#sylvainhuc-wrap {padding:0px 100px;max-width: 1920px;margin: auto;display: -moz-flex;display: -webkit-flex;display: -ms-flex;display: flex;flex-flow: column;}
header, header * {-webkit-transition: 0.6s;-o-transition:0.6s;-moz-transition:0.6s;transition: 0.6s;}
header {width: 100%;padding: 50px 0px;text-align: left;display: -moz-flex;display: -webkit-flex;display: -ms-flex;display: flex;-webkit-justify-content:space-between;justify-content:space-between; }
.sylvainhuc-main-menu ul {display: -moz-flex;display: -webkit-flex;display: -ms-flex;display: flex;}
.sylvainhuc-main-menu ul li {padding: 0 10px 0 10px;}
.sylvainhuc-main-menu a, .sylvainhuc-main-menu a:visited{font-style: italic;text-decoration: none;}

.demarche, .bio {
    display: flex;
    padding-top: 20px;
}
.demarche > div, .bio > div {
    width: 50%;
    padding: 0 10px 0 10px;
}

.about_photos img {
    width: 100%;
}

.about_photos {
    display:block;
	padding-top:20px;
}


@media screen and (max-width:760px){
	.demarche, .bio {
		display: block;
	}
	.demarche > div, .bio > div {
		width: 100%;
	}
}

@media (hover: none) {
.sylvainhuc-main-menu a, .sylvainhuc-main-menu a:visited{text-decoration: none;}
}
.sylvainhuc-main-menu a:hover,.sylvainhuc-main-menu a:active,
.current-menu-parent a, .current-menu-parent a:visited, .current-menu-parent a:hover, .current-menu-parent a:active{text-decoration: underline;}
.current-menu-item a, .current-menu-item a:visited, .current-menu-item a:hover, .current-menu-item a:active{text-decoration: underline;}

.photos {display: -moz-flex;display: -webkit-flex;display: -ms-flex;display: flex;-webkit-justify-content:center;justify-content:center;}
.photo-col1 > div {height: 25vh;}
.photo-col2 > div {height: 75vh;}
.photo-col1 img {height: 100%;padding: 0 0 5px 0;}
.photo-col2 img {height: 100%;padding-left: 5px;padding-bottom:5px}

@media (hover: none) {
	.sylvainhuc-main-menu ul {flex-flow:column;width:100%;-webkit-justify-content:center;justify-content:center;}
	header {padding-top: 0px}
	.sylvainhuc-main-menu {background: #fff;position: fixed;top: -5000px;opacity:0;min-width: 100%;left: 0;min-height: 100vh;max-height: 100%;z-index: 1;padding-left: 10px;}
	.sylvainhuc-main-menu li {padding:10px;font-size:250%}
	#sylvainhuc-openclose-menu {position: fixed;border: 1px solid #000;border-radius: 5px;top: 10px;right: 20px;z-index: 2;display: -moz-flex;display: -webkit-flex;display: -ms-flex;display: flex;flex-flow: column;-moz-align-items: center;-webkit-align-items: center;-ms-align-items: center;align-items: center;}
	#sylvainhuc-openclose-menu-bckgrnd {background:#fff;border-radius: 5px;padding:5px 10px;}
	#sylvainhuc-openclose-menu-bckgrnd a, #sylvainhuc-openclose-menu-bckgrnd a:link, #sylvainhuc-openclose-menu-bckgrnd a:visited{background-repeat: no-repeat;background-position: center;width:40px;height:40px;color: #ff9900;background-size: cover;}
	#sylvainhuc-openclose-menu-bckgrnd:hover, #sylvainhuc-openclose-menu-bckgrnd:active {transform: scale(1.1);}
	#sylvainhuc-open-menu {background:url(css/images/open-menu.png);display: block;}
	#sylvainhuc-close-menu {background:url(css/images/close-menu.png);display:none;z-index:3;}
}


.container {width:50%;margin-left: 25%;margin-right: 25%;color:#000;padding-top:30px;}
footer {padding-top: 100px;}	

div#ajaxLoadMore * {-webkit-transition: 0.6s;-o-transition:0.6s;-moz-transition:0.6s;transition: 0.6s;}

@media screen and (max-width: 1199px) {
	.container {width: 60%;margin-left: 20%;margin-right: 20%;}
}

@media screen and (max-width:1023px){
	#sylvainhuc-wrap{padding:0px 50px;}
}

@media screen and (max-width: 950px) {
	#menu-button:hover, #menu-button:focus, #menu-button:hover, #menu-button:focus {background: #000000;}
	#menu-button {display: inline-block;transition: transform 0.5s, background-color 0.5s;width: 55px;height: 55px;position: fixed;top: 15px;right: 5%;padding: 0 0;cursor: pointer;font: inherit;color: inherit;text-transform: none;border: 0;margin: 0;overflow: visible;z-index: 99999;outline: none;}
	#menu-button .menu-box {color: #ffffff;display: inline-block;vertical-align: middle;width: 25px;height: 19px;display: inline-block;position: relative;}
	#menu-button:hover .menu-inner, #menu-button:hover .menu-inner::before, #menu-button:hover .menu-inner::after, #menu-button:hover .menu-open .menu-inner, #menu-button:hover .menu-open .menu-inner::before, #menu-button:hover .menu-open .menu-inner::after, #menu-button:focus .menu-inner, #menu-button:focus .menu-inner::before, #menu-button:focus .menu-inner::after, #menu-button:focus .menu-open .menu-inner, #menu-button:focus .menu-open .menu-inner::before, #menu-button:focus .menu-open .menu-inner::after {background-color: #ffffff;}
	.menu-inner, .menu-inner::before, .menu-inner::after {transition-property: none;width: 25px;height: 3px;background-color: #ffffff;border-radius: 4px;position: absolute;transition-duration: 0.15s;transition-timing-function: ease;}
	.menu-inner {display: block;top: 50%;margin-top: -1.5px;}
	.is-active .menu-inner {transform: rotate(45deg);}
	.container {width: 70%;margin-left: 15%;margin-right: 15%;}
}

@media screen and (max-width:760px){
	.container {width: 90%;margin-left: 5%;margin-right: 5%;}
	#sylvainhuc-wrap {padding: 0px 20px;}
	h1 {font-size: 250%;}
	h2 {font-size: 180%;}
	.photos {flex-flow:column;}
	.photo-col1 > div {width:100%;height: auto;}
	.photo-col2 > div {width:100%;height: auto;}
	.photo-col1 img {width: 100%;padding: 5px;height: auto;}
	.photo-col2 img {width: 100%;padding: 5px;height: auto;}
}

@media screen and (max-width:670px){
	h1 {font-size: 250%;}
	h2 {font-size: 180%;}
	body {font-size:90%}
}

@media screen and (max-width:550px){
	#sylvainhuc-wrap {padding: 0px 10px;}
	a#lang {padding: 0px;}
	header{position: absolute;}
	h1 {font-size: 250%;}
	h2 {font-size: 180%;}
	body {font-size:85%}
}


@media screen and (max-width:400px){
	#sylvainhuc-wrap {padding: 0px 10px;}
	header{position: absolute;}
	h1 {font-size: 250%;}
	h2 {font-size: 180%;}
	body {font-size:85%}
}

@media screen and (max-width:300px){
	.container {width: 100%}
	#sylvainhuc-wrap {padding: 0px 10px;}
	header{position: absolute;}
	h1 {font-size: 250%;}
	h2 {font-size: 180%;}
	body {font-size:80%}
}


@-webkit-keyframes scaleIn {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scaleIn {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}