/*--------------------------------------------------------------------------------------------------
* CSS Fatix - Responsive design
* Dernière Modifs 31/01/2013
*
* Copyright 2013, Matthieu LIGIER
--------------------------------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------------------------------
   CSS Reset
--------------------------------------------------------------------------------------------------*/
   html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,
   dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,
   time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline;}


/*--------------------------------------------------------------------------------------------------
   HTML5 display-role reset for older browsers
--------------------------------------------------------------------------------------------------*/
   article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
   body{line-height:1;}
   li{display:block;}
   ol,ul{list-style:none;}
   blockquote,q{quotes:none;}
   blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
   table{border-collapse:collapse;border-spacing:0;}
   hr{background:none;border:none;height:1px;margin:0 auto;padding:0;}
   /* Always force a scrollbar to prevent content shifting */
   html{overflow-y:scroll;}



/*--------------------------------------------------------------------------------------------------
   Style site internet écran suppérieur à 1200 pixels
--------------------------------------------------------------------------------------------------*/


html, body 													{height: 100%;min-height: 100%;background: #FFFFFF;-webkit-font-smoothing: antialiased;}
body														{letter-spacing: 0px;font-family:"Lato", "Verdana", "Arial", "sans-serif";font-size: 14px;line-height: 20px;color: #191919;font-weight: 400;}
.full														{width: 100%;}
.extralarge													{width: 90%;}
.large														{width: 70%;}
.medium														{width: 50%;}
.small														{width: 30%;}
.tiny														{width: 10%;}
a 															{color: #4585f3;text-decoration: none;}
.clear 														{clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.container 													{width: 1200px;margin: 0px auto;padding: 0px;}
.space 														{width: 100%;height : 55px;}
.space2														{width: 100%;height : 140px;}
div ul.nav-menu 											{margin: 0 auto; display: block;padding-right: 60px;padding-bottom: 40px;}
div ul.nav-menu li.nav-item                               	{display: block;}
div ul.nav-menu > li.nav-item > a                         	{display: block; text-decoration: none; position:relative;color: #000;font-size: 22px;font-weight: 300;margin-bottom: 20px;transition:color .35s ease-in-out;-moz-transition:color .35s ease-in-out;-webkit-transition:color .35s ease-in-out;-o-transition:color .35s ease-in-out;-ms-transition:color .35s ease-in-out;}
div ul.nav-menu > li.nav-item > a:hover                     {color: #4585f3;}
div ul.nav-menu > li.active > a 							{color: #4585f3;}
div ul.nav-submenu                                        	{z-index: 10000;border: 0px;background-color: #FFFFFF;padding: 10px 0px 15px 0px;border-top: 1px solid #4585f3;text-align: left;display: none;top: 0px;left: 130px;}
div ul.nav-menu > li.nav-item:hover > ul.nav-submenu      	{display: block; }
div ul.nav-menu li.dropdown-item:hover > ul.nav-submenu   	{display: block; }
div ul.nav-submenu ul.nav-submenu                         	{position: absolute;top: -32px;width: 200px;left: 200px; display: none; float: left; }
div ul.nav-menu li.dropdown-item                          	{position: relative; }
div li.dropdown-item ul.nav-submenu li a                  	{color: #000000;margin: 0px;font-size: 18px;line-height: 46px;width: 100%;display: block;font-weight: 300;transition:color .35s ease-in-out;-moz-transition:color .35s ease-in-out;-webkit-transition:color .35s ease-in-out;-o-transition:color .35s ease-in-out;-ms-transition:color .35s ease-in-out;}
div li.dropdown-item  ul.nav-submenu li.select a          	{color: #4585f3;}
div li.dropdown-item  ul.nav-submenu li a:hover           	{color: #4585f3;}

#top{
	width: 100%;
	height: auto;
	color: #000000;
}

#top h1{
	font-weight: 300;
	font-size: 30px;
	padding: 44px 0px 10px 0px;
	line-height: 1;
}

#top h2{
	font-weight: 300;
	font-size: 22px;
	padding: 0px 0px 50px 0px;
	line-height: 1;
}

#page{
	margin-top: 50px;
}

#left-panel {
	float: left;
	width: 30%;
}

#news{
	padding-right: 60px;
	padding-bottom: 40px;
}

#news h2 {
	font-size: 22px;
	font-weight: 300;
	margin-bottom: 15px;
	margin-top: 20px;
	border-bottom: 1px solid #4585f3;
	padding-bottom: 20px;
}

#news p{
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

#content{
	float: left;
	width: 70%;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
}

#content h1 {
	font-size: 28px;
	font-weight: 400;
	color: #4585f3;
	margin-bottom: 30px;
}

#content h2 {
	font-weight: 300;
	border-bottom: 1px solid #4585f3;
	color: #4585f3;
	font-size: 24px;
	padding-bottom: 3px;
	margin-bottom: 3px;
}

#content h3 {
	font-weight: 300;
	border-bottom: 1px solid #4585f3;
	color: #4585f3;
	font-size: 24px;
	padding-bottom: 5px;
	margin-bottom: 26px;
}

.date-news{
	display: block;
	font-style: italic;
	color: #C3C3C3;
	font-weight: 300;
	font-size: 14px;
}

.date-news-list{
	display: block;
	font-style: italic;
	color: #C3C3C3;
	font-weight: 300;
	font-size: 14px;
	padding-top: 10px;
}



#bottom{
	width: 100%;
	height: auto;
	background-color: #f1f1f1;
	margin-top: 30px;
}

#a-propos,#plan-site,#horaire,#medipro-calendar{
	width: 25%;
	float: left;
	display: block;
	padding: 4% 0% 2% 0%;
}

#bottom h2{
	padding-bottom: 20px;
	font-weight: 300;
	margin: auto;
	border-bottom: 1px solid #7b7b7b;
	width: 85%;
	margin-bottom: 20px;
	font-size: 24px;
}

#bottom p{
	width: 85%;
	margin: auto;
	margin-bottom: 20px;
	font-weight: 300;
	font-size: 14px;
	line-height: 26px;
}

.plan-site{
	width: 85%;
	margin: auto;
	margin-bottom: 20px;
	font-weight: 300;
	font-size: 14px;
	line-height: 26px;	
}

.plan-site ul li a{
	color: #000;
	transition:color .35s ease-in-out;
	-moz-transition:color .35s ease-in-out;
	-webkit-transition:color .35s ease-in-out;
	-o-transition:color .35s ease-in-out;
	-ms-transition:color .35s ease-in-out;
}

.plan-site ul li a:hover{
	color: #4585f3;
}

#cbc{
	height: 55px;
	background-color: #e3e3e3;
	font-size: 12px;
}

#cbc p {
	text-align: center;
	padding-top: 18px;
}

label{
	width: 100%;
	display: block;
	font-weight: 300;
	font-size: 16px;
}

input{
	border: 1px solid #DDD;
	padding: 8px;
	margin: 11px 0px;
	font-family: "Lato", "Verdana", "Arial", "sans-serif";
	color: #191919;
	line-height: 22px;
}

textarea{
	border: 1px solid #DDD;
	padding: 8px;
	margin: 11px 0px;
	font-family: "Lato", "Verdana", "Arial", "sans-serif";
	color: #191919;
	height: 250px;
	line-height: 22px;
}

#divcontact{
	width: 100%;
}

#divgmap{
	width: 100%;
}

.btncontact{
	font-weight: bold;
	padding: 15px;
	cursor: pointer;
}

.success{
	padding: 10px;
	border: 1px solid #2B5F2B;
	background-color: #D3FFCE;
	color: #259025;
	margin-bottom: 25px;
	font-size: 14px;
}

.fail{
	padding: 10px;
	border: 1px solid #FF0000;
	background-color: #FFCECE;
	color: #FF0000;
	margin-bottom: 25px;
	font-size: 14px;
}


/*--------------------------------------------------------------------------------------------------
   Style site internet écran inferieur ou égal à 1250 pixels
--------------------------------------------------------------------------------------------------*/

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

.container						{width: 900px;}


}



/*--------------------------------------------------------------------------------------------------
   Style pour les tablette en mode portrait
--------------------------------------------------------------------------------------------------*/

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

	.container{
		width: 85%;
	}

	#top h1 {
	  font-size: 24px;
	}

	#top h2{
		font-size: 18px;
	}

	#content{
		font-size: 16px;
	}

	#content h1 {
		font-size: 24px;
		margin-bottom: 15px;
	}

	div ul.nav-menu {
		padding-bottom: 20px;
	}

	div ul.nav-menu > li.nav-item > a {
		font-size: 18px;
		margin-bottom: 15px;
	}

	div li.dropdown-item ul.nav-submenu li a {
		font-size: 15px;
		line-height: 30px;
	}

	#news h2 {
		font-size: 18px;
		margin-bottom: 15px;
		margin-top: 15px;
		padding-bottom: 15px;
	}

	#news p {
		font-size: 14px;
		font-weight: 300;
		line-height: 1.5;
	}

	#bottom{
		padding-bottom: 30px;
	}

	#bottom h2 {
		font-size: 18px;
		padding-bottom: 15px;
		margin-bottom: 10px;
		width: 100%;
	}

	#bottom p {
		margin-bottom: 0px;
		width: 100%;
	}

	#a-propos, #plan-site, #horaire, #medipro-calendar {
		width: 100%;
		padding: 25px 0px 0px 0px;
	}

}



/*--------------------------------------------------------------------------------------------------
   Styles pour les mobiles en mode paysage
--------------------------------------------------------------------------------------------------*/

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

	#top h1{
		text-align: center;
		font-size: 18px;
	}

	#top h2{
		text-align: center;
		font-size: 14px;
	}
	
	#left-panel {
		width: 100%;
	}

	#page {
		margin-top: 35px;
	}

	div ul.nav-menu {
		padding-bottom: 20px;
		padding-right: 0px;
		text-align: center;
	}

	div li.dropdown-item ul.nav-submenu li a {
		text-align: center;
	}

	div ul.nav-menu > li.nav-item > a {
		font-size: 16px;
		margin-bottom: 10px;
	}

	div li.dropdown-item ul.nav-submenu li a {
		font-size: 14px;
		line-height: 28px;
	}

	#content {
		width: 100%;
		margin-bottom: 10px;
		font-size: 14px;
	}

	#content h1{
		text-align: center;
		border-bottom: 1px solid #4585f3;
		padding-bottom: 15px;
		font-size: 20px;
	}

	#content h1.titre-news{
		border:0px;
	}

	#content h3{
		border:0px;
	}

	#news{
		display: none;
	}

	#bottom h2 {
		font-size: 16px;
	}

	#bottom p{
		font-size: 12px;
		line-height: 22px;
	}

	#cbc {
		font-size: 10px;
	}

	.plan-site ul li a {
		font-size: 12px;
	}

	.medium {
		width: 100%;
	}

	label {
		font-size: 14px;
	}

	input{
		font-size: 12px;
	}

	textarea{
		font-size: 12px;
	}



}



/*--------------------------------------------------------------------------------------------------
   Styles pour les mobiles en mode portrait
--------------------------------------------------------------------------------------------------*/

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



}



/*--------------------------------------------------------------------------------------------------
   Styles pour les impressions
--------------------------------------------------------------------------------------------------*/

@media print {
 	


}



/*--------------------------------------------------------------------------------------------------
   Styles pour les sélections
--------------------------------------------------------------------------------------------------*/

::selection {
	color:#333;
	background:#CCC;
}

::-webkit-selection {
	color:#333;
	background:#CCC;
}

::-moz-selection {
	color:#333;
	background:#CCC;
}