@import "fonts.css";

p {
    color: #323232;
    font-family: 'Merriweather Sans',sans-serif,Verdana,Arial;
    font-size: 100%;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
body {
    color: #323232;
    font-family: 'Merriweather Sans',sans-serif,Verdana,Arial;
    margin: 0;
    padding: 0;
}
body.bg {
}
div#background {
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: -1;
}

#wrapper {
	position: absolute; 
	width: 100%; 
	min-height: 100%;
    box-sizing: border-box;
}

div#hover {
    background: url("../../../images/background.gif") repeat-x scroll 0 0 transparent;
}
body.cms_editpage div#hover {
    position: inherit;
}
div#page {
    background-color: transparent;
    margin: auto;
    min-height: 100%;
    position: relative;
    width: 100%;
}

div.centered,
body.naviFixed #navigation div {
	width: 58%;
	margin: 0 auto;
	min-width: 990px;
	position: relative;
}

div#language {
    background-color: transparent;
    float: left;
    height: 23px;
    margin: 0;
    padding: 8px 0 0;
    position: relative;
    text-align: left;
    width: 20%;
}
div#language ul.level1 {
    float: left;
}
div#language ul, div#language li {
    list-style: none outside none;
    margin: 0;
    padding: 0 5px 0 0;
}
div#language li {
    float: left;
}
div#language a, div#language ul li a {
    color: white;
    font-size: 85%;
    text-decoration: none;
}
div#language .fa-coment-o {
    color: #e4dcc5;
}
div#language #flag {
    float: left;
    height: 13px;
    padding-right: 5px;
    padding-top: 2px;
    width: 10px;
}
div#info {
    background-color: transparent;
    float: left;
    height: 23px;
    margin: 0;
    padding: 8px 0 0;
    position: relative;
    text-align: right;
    width: 80%;
}
div#info a, div#info p span {
    color: white;
    font-size: 85%;
    text-decoration: none;
}
div#info a.tel, div#info p span.tel {
    background: url("../../../images/tel.gif") no-repeat scroll 0 2px transparent;
    margin: 0 15px;
    padding-left: 18px;
}
div#info a.mail {
    background: url("../../../images/mail.gif") no-repeat scroll 0 1px transparent;
    margin: 0 15px;
    padding-left: 18px;
}
div#info a.mail span._at_ {
}
div#info a.calendar {
    background: url("../../../images/calendar.gif") no-repeat scroll 0 0 transparent;
    margin: 0 15px;
    padding-left: 18px;
}
div#logo {
    float: left;
    height: 50px;
    margin: 0;
    padding: 35px 0 0;
    position: relative;
    width: 95%;
}
div#social {
    display: flex;
    flex-direction: row;
    height: 45px;
    margin: 0;
    padding: 40px 0 0;
    position: absolute;
    top: 31px;    
    right: 0;
}
div#social > a{
	padding-right: 10px;
}

#navigation {
    float: left;
    height: 31px;
    margin: 0;
    padding: 7px 0 0;
    position: relative;
    width: 100%;
}


#navigation {
    clear: both;
	position: relative;
    width: 100%;
    height: 38px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    transition: position 0.1s ease-in-out;
    z-index: 11;
}

body.naviFixed #navigation {
    position: fixed;
    display: block;
    background-color: white;
    padding-top: 5px;
    border-bottom: 1px solid #ccc;
    left: 0;
}

#mainnavigation {
	width: 100%;
    box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}


div.wrapper {
    background: url("../../../images/wrapper.gif") repeat-y scroll 0 0 transparent;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
div.wrapper div#left {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 20%;
}
img.unique {
    bottom: 60px;
    left: 20px;
    position: absolute;
}
div.wrapper div#left div#subnavigation {
    float: left;
    margin: 0;
    padding: 0 0 50px;
    position: relative;
    width: 100%;
}
div.wrapper div#left div#adresse {
    float: left;
    margin: 20px;
    padding: 0;
    position: relative;
    width: 200px;
}
div.wrapper div#left div#label {
    float: left;
    margin: 20px;
    padding: 0;
    position: relative;
    width: 200px;
}
div.wrapper div#right {
    background-color: #e5dec6;
    float: left;
    margin: 0;
    min-height: 750px;
    padding: 0;
    position: relative;
    width: 80%;
}
div.wrapper div#right div#banner {
    background: url("../../../images/banner.jpg") no-repeat scroll 0 0 transparent;
    background-size: cover;
    background-position: center;
    float: left;
    height: 180px;
    margin: 0;    
    padding: 0;
    position: relative;
    width: 100%;
}
div.wrapper div#right div#content {
    float: left;
    margin: 0;
    min-height: 200px;
    padding: 27px 5%;
    position: relative;
    width: 90%;
    z-index: 1;
}
div#footer {
    background-color: transparent;
    float: left;
    margin: 0;
    min-height: 30px;
    padding: 0;
    position: relative;
    width: 100%;
}
div#footer div#copy {
    background-color: transparent;
    float: left;
    margin: 12px 0 0;
    min-height: 30px;
    padding: 0;
    position: relative;
    width: 25%;
}
div#footer div#cms {
    background-color: transparent;
    float: right;
    margin: 0 0 0 490px;
    min-height: 30px;
    padding: 0;
    position: relative;
    text-align: right;
    width: 16%;
}
div.clear {
    clear: left;
    font-size: 0;
    height: 0;
    line-height: 0;
}

.mobile {
		display: none;
	}

.cms_editpage .mobile {
	display: block !important;
}

body.cms_editpage #wrapper {
	position: relative;
}

@media only screen and (max-width: 1030px){
	div.centered {
		min-width: 200px;
		width: 96%;
	}
	
	div.wrapper div#left {
	    width: 25%;
	    font-size: 90%;
	}
	
	div.wrapper div#right {
	    width: 75%;
	}
}

@media only screen and (max-width: 900px){
	 div.centered {
		min-width: 200px;
		width: 100%;
	}
	
	div#logo {
		width: 93%;
		margin-left: 2%;
	}
	
	div#language {
		margin-left: 2%;
		width: 18%;
	}
	
	#content h2 {
		font-size: 130% !important;
	}
	
	div#footer {
		padding: 0 2%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	
	div#footer div#cms {
		margin: 0;
		width: 30%;
	}
	
}

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

	div.wrapper div#right div#content {
		font-size: 120%;
	}
	
	#content h1 {
		font-size: 150% !important;
	}
	
	#content h2 {
		font-size: 115% !important;
	}
   
	div#background {
		display: none;
	}
	
	div#info {
		position: absolute;
		right: 0;
		width: 100%;
		float: none;
		left: auto;
		z-index: 3;
	}
	
	div#info a {
		margin: 0 10px !important;
	}
	
	div#language {
		z-index: 4;
		width: 70px;
		padding-top: 6px;
	}
	
	div#logo {
		position: absolute;
		top: 29px;
		margin: 0;
		height: auto;
		width: 100%;
		padding: 20px 2%;
		background: #fff;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		z-index: 2;
	}
	div#social {
		float: none;
		position: absolute;
		top: 7px;
		right: 50px;
		z-index: 2;
	}
	
	div#social img{
		width: 30px;
		height: 30px;
	}
	
	div.wrapper div#left {
    	display: none;
	}
	
	div.wrapper div#right {
		width: 100%;
	}
	
	div.wrapper div#right div#content {
		padding: 1% 0 60px 1%;
		width: 98%;
	}

	div.wrapper div#right div#banner{
		margin-top: 68px;
	}
	
	div#footer div#copy {
		margin: 10px 0;
		font-size: 120%;
		width: 140px;
	}
	
	img.unique {
	    bottom: 15%;
	    height: auto;
	    left: 45%;
	    width: 40px;
	    position: absolute;
	}
	
	div#footer div#cms {
		font-size: 120%;
	    margin: 10px 0;
	    width: 120px;
	}
}

@media (max-width: 570px){
	div.wrapper div#right div#banner{
		margin-top:60px;
	}

	#content .cmsGroup.cmsColSpan5 .cmsCell.cmsColSpan3,
	#content .cmsGroup.cmsColSpan5 .cmsCell.cmsColSpan2 {
	    margin-bottom: 25px;
	}
	
	#content .cmsCell.news {
		width: 97% !important;
		margin-left: 1.5%;
	}
	
	div#logo img {
		width: 150px;
		height: auto;
	}
	
	div#info a {
		margin: 0 6px !important;
	}
	
	div#info a.tel, div#info p span.tel {
	   display: none;
	}
	
	.nomobile {
		display: none;
	}
	
	.cms_editpage .nomobile {
		display: block !important;
	}
	
	.mobile {
		display: block;
	}
	
}

@media only screen and (max-width: 410px){
	
	.cmsGalleryOuterDiv {
		float: none !important;
		margin-left: 0 !important;
		width: 100% !important;
	}
	
}

@media (max-width: 360px){
	
	img.unique {
	    bottom: 15%;
	    height: auto;
	    left: 47%;
	    width: 40px;
	    position: absolute;
	}

}