/* ----------------------------------------------------------------
	Custom CSS
-----------------------------------------------------------------*/
@import url("dark-custom.css");
@import url("colors-custom.css");
@import url("fonts-custom.css");


/*-------------TEXTE-------------*/

body {font-size: 14px; color: #264b75;; line-height: 22px;}
h1, h2, h3, h4, h5, h6 { color: #264b75;}
.button:hover { background-color: #264b75;}

.button.button-dark { background-color: #264b75;}

/*-------------HEADER-------------*/


/*Contact*/
#nav-contact a { margin: 0 5px}
#nav-contact a:hover { color: #264b75;}
#nav-contact a i { margin-right: 3px}

/*Menu*/
.primary-menu ul li > a {font-size: 12px; letter-spacing: 1px;color: #264b75}


#primary-menu-trigger, #page-menu-trigger { background-color: #00b1eb; color: #fff; border-radius: 50%;}
.svg-trigger { width: 40px; height: 40px;}
.svg-trigger path { stroke: #fff}


/*-------------CONTENT-------------*/
#content p { line-height: 20px;font-size:13px; margin-bottom: 20px;}

/*Titre des pages*/
#title-page h1 {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 30px 20px 0 20px;
    background-color: #00b1eb;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
}
#title-page h1 span {text-indent: -10000px; position: absolute}
#title-page img {
    position: absolute;
    right: 20px;
    bottom: 90px;
    width: 200px;
    height: auto;
}

/*ACCUEIL*/
#carousel-accueil .portfolio-item { padding: 10px; border: 1px solid #eee}
#carousel-accueil .portfolio-item h3 {font-size: 14px; text-transform: uppercase; height: 40px; line-height: 20px;}
#carousel-accueil .portfolio-item p { font-size: 12px; line-height: 15px; height: 50px}


/*PAGE DE CONTENU*/
#content p.message-introduction {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}
a.contact { border-bottom: 1px dashed}

.gutter-40 > .col, .gutter-40 > [class*="col-"] { padding-bottom: 20px; padding-top: 20px;}

#services h2 {font-size: 24px; line-height: 28px; height: 70px}
#services a.contact { color: rgba(255,255,255,0.7); border-bottom: 1px dashed}



/*Carte*/
.leaflet-popup-content-wrapper { border-radius: 0;}
.leaflet-popup-content { margin: 13px 30px;}
.leaflet-popup-content h4 { margin-bottom: 10px}
.leaflet-popup-content p { margin: 0 0 10px 0 !important}
.leaflet-popup-content a.btn { padding: 0 20px; background-color: #00b1eb; color: #fff; border-radius: 0 }

/*Zoom image*/
.img-magnifier-container {position:relative; width: 500px; height: auto}
.img-magnifier-glass {position: absolute; bottom: -500px; border: 1px solid #666; border-radius: 0; cursor: none; width: 300px; height: 300px;}

/*Formulaire*/
.form-widget { padding: 0 20px}
label {
    font-size: 15px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 1px;
    color: #264b75;
}
.sm-form-control {
    padding: 5px 14px;
    font-size: 13px;
    border: none;
    background-color: #eee;
}
.input-group-text { background-color: #264b75; color: #fff}
.form-widget .rgpd {
    font-size: 10px !important;
    color: #999;
    line-height: 11px !important;
    letter-spacing: 0;
    margin-top: 10px;
    margin-bottom: 5px;
    max-width: none;
    text-align: justify;
}
.form-widget .rgpd a {color: #999 !important; border-bottom: 1px dotted}


	

/*pop/up*/
.mfp-fade.mfp-bg.mfp-ready {opacity: 0.90;}
.mfp-arrow { background-color: #000 !important}
.mfp-arrow-left::before, .mfp-arrow-right::before { content: normal}
.mfp-bottom-bar { display: none}

.mention-ajax-modal { position: relative; width:  1000px !important; margin: 0 auto;}
.mention-ajax-modal .modal-padding {background-color: #fff;}

.ajax-modal-title {padding: 5px 20px;;background-color: #000 !important;}
.ajax-modal-title h2 {font-size: 20px; font-weight: normal; letter-spacing: 2px; color: #fff;}

.mention-ajax-modal p { color: #000 !important}
.mention-ajax-modal a { color: #000 !important}
.mention-ajax-modal a:hover { border-bottom: 1px dotted}


/*-------------FOOTER-------------*/
#footer .footer-widgets-wrap {padding: 60px 0;}
.dark #footer, #footer.dark { background-color: #0081c7; border-top-color: #00b1eb;}
.dark #copyrights, #copyrights.dark { background-color: #264b75 }
.grid-item > img, .grid-item .grid-inner > img { padding: 5px}

/* ----------------------------------------------------------------
	Contenu Responsive 
-----------------------------------------------------------------*/
@media (min-width: 1600px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (max-width: 1599.98px) {
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}
@media (max-width: 1350px) {
	#top-bar .container,
	#header-wrap .container { max-width: none}
}


@media (min-width: 1200px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (max-width: 1199.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (min-width: 992px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (max-width: 991.98px) {
	/*HEADER*/
	/*CONTENT*/
	#content .masonry-thumbs.grid-4 a { width: 33.333%}
	.form-widget {padding: 0;}
	/*FOOTER*/
	.widget_links li { display: inline-block}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (max-width: 767.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (min-width: 576px) and (max-width: 767.98px) {
	/*HEADER*/
	/*CONTENT*/
	/*FOOTER*/
}

@media (max-width: 575.98px) {
	/*HEADER*/
	/*CONTENT*/
	.masonry-thumbs.grid-4 a { width: 50%}
	/*FOOTER*/
}