@charset "utf-8";
/* CSS Document */





/*@media only screen and (min-width: 768px) and (max-width: 959px) {*/	

@media only screen and (min-width: 961px) and (max-width: 1100px) {
	.container {
		width:960px;
	}
	
	#navSlider {
		width:960px;
	}
	
	nav ul li {
		font-size: 12px;
		padding: 109px 10px 0;
	}
	
	#main #accueil {
		width:556px;
	}
	
	#services-images img {
		height: 264px;
	}
	
	#contact img {
		height: 225px;
	}
	
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 960px) {
	/*===============
	MOBILE MENU */
	
	nav ul {
		display:block;
		width:100%;
		z-index:20;
		background-color:#FFF;
		padding-top:0px;
		height:0px;
		position: relative;
    	top: 105px;
		overflow:hidden;
	}
	
	nav ul li {
		display:block;
		width:100%;
		height: 10px;
    	padding: 10px 0 25px;
		font-size:16px;
	}
	
	nav a.linkedin {
		display:none;
	}
	
	nav ul li a {
		padding:0px;
		position:relative;
	}
	
	nav ul li a:after {
		content:'';
	}
	
	nav ul li a:hover, nav .selected {
		border-bottom: none;
	}
	
	nav .selected:after {
		background-image: url("../img/green_color.jpg");
		background-size: cover;
		content: "";
		
		display: block;
		height: 4px;
		position: relative;
		top: -10px;
		left: 76%;
		width: 20%;
	}
	
	nav .selected:before {
		content:"";
		background-image:url(../img/green_color.jpg);
		background-size: cover;
		
		position:relative;
		display:block;
		top:10px;
		right:-10px;
		width:20%;
		height:4px;
	}
	
	#open-mobile {
		display:block;
		position:absolute;
		top:0px;
		right:0px;
		width:50px;
		height: 100%;
		float:right;
		margin-right:20px;
		background-image:url(../img/open-menu.png);
		background-size:25px auto;
		background-repeat:no-repeat;
		background-position:center center;
	}
	
	/* MOBILE MENU 
	============= */
	
	.container {
		width:767px;
	}
	
	#main .container {
		top:2px;
		margin-bottom:0px;
		padding: 77px 50px 28px 50px;
	}
	
	#main #accueil {
		width: 767px;
		left: 0px;
		padding: 0 0 28px 50px;
	}
	
	#banner.home {
		display: block;
	}
	
	.widget-holder, #sliderWrapper, #navSlider, #services-images img:last-child, #contact img, a.theForm {
		display:none !important;
	}
	
	
	#cabinet-1 img {
		float:none;
		margin-bottom:15px;
		width:100%;
	}
	
	#services-images img:first-child {
		width:100%;
	}
	
	.article {
		width: 100%;
	}
	
	footer #linkedin {
		display:block;
		text-align:center;
	}
	
	#formulaire { display:block; }
	
}


/* #Mobile (Landscape)
================================================== */

/* Note: Design fluid pour mobile plus petit que ipad */

@media only screen and (max-width: 768px) { /* 768 au lie de 767 pour inclure les ipad portrait */
	
	#logo {
		margin-left:12px;
	}
	
	.container {
		width:100%;
	}
	
	#main .container {
		padding: 77px 25px 28px 25px;
	}
	
	#main #accueil {
		width: 100%;
		padding: 0 25px 28px 25px;
	}
	
	#main p {
		padding-right: 0px;
	}
	
	footer {
		font-size:11px;
	}
	
	footer .container {
		padding:0 10px;
	}

	h1 {
		font-size: 35px;
	}
	h2 {
		font-size: 25px;
	}
	h3 {
		font-size: 16px;
		line-height: 1.2;
		margin-bottom: 15px;
	}

	#main p {
		font-size: 16px;
		line-height:1.44;
	}

	#main ul,
	#main ul ul {
		font-size: 16px;

	}

	#main ul ul li{
		padding-left: 1em;
		
	}
	#main ul ul li:before{
		left: 0;
		margin-left: 0;
		margin-right: 8px;
	}

	#nouvelles .article h2 {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.date-author {
		font-size: 18px!important;
	}

	.copyright {
		flex-direction: column;
	}

	.copyright .sep {
		display: none;
	}
	
	.copyright span,
	.copyright a{
		align-self: center;
	}
	
	.copyright :last-child{
		margin-left: 0;
	}

	#linkedin a {
		margin-left: 0;
	}
	
}







/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	
	#logo img, #menu-full, nav {
		height:100px;
	}
	
	#open-mobile {
		height: 80%;
	}
	
	#border-menu, #banner {
		top: 78px;
	}
	
	#cabinet-3 img {
		width:110px;
	}
	
	#equipe img {
		width:100%;
		margin-bottom:15px;
	}
	
	footer {
		font-size:9px;
	}
}


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
	
	#logo img, #menu-full, nav {
		height:100px;
	}
	
	#open-mobile {
		height: 80%;
	}
	
	#border-menu, #banner {
		top: 78px;
	}
	
	#cabinet-3 img {
		width:110px;
	}
	
	#equipe img {
		width:100%;
		margin-bottom:15px;
	}
	
	footer {
		font-size:8px;
	}
}