@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Norican');

/* CHANGEMENTS TEMPORAIRES */
* { font-family: 'Lato', sans-serif !important; }

/* BLOCS */
html, body { margin:0; padding:0; }
section { padding: 3px;}
header #headline { height:90px;}
#headline #logo { height:90px; width:80%; padding:10px; }
header #subline { min-height:57px;}
#subline table { width: 100%;}
.phone-number {
    max-width: 250px;
    margin: 2px auto;
    border-radius: 30px;
    }
.phone-number-desc {
    max-width: 250px;
    margin: 2px auto;
}
.phone-number img { vertical-align: middle;border-radius:15px;}
#form-slider table { width: 100%;}
#form-slider .first-column { width:6%;}
#form-slider .second-column { width:88%;}
#form-slider .third-column { width:6%;}
#description { padding: 0 10px;}

/* ALIGNEMENTS et POLICES */
h1 {font-variant: small-caps; font-size: 32px;}
h1, .horaires, .phone-number { text-align: center;}
.phone-number-desc {text-align: center; font-size: 14px; color: #808094;}
h1, #subline, #midline, .step-name {font-family: 'Arial Black';}
#form-slider .first-column { text-align: right; vertical-align: top; word-wrap: break-word;  overflow-wrap: break-word}
#form-slider .second-column {text-align: center;}
#form-slider .third-column { text-align: left; vertical-align: bottom;}
.description-part1, .description-part2, .description-part2-detail, .description-part3 {color: rgb(32, 73, 164); font-family: 'Arial';}
.description-part1, .description-part3 {text-align: left; font-family: 'Arial'; font-size: 19px;  }
.description-part2 {text-align: center; /*font-family: 'Arial Black';*/ font-size: 22px;}
.description-part2-detail {  font-size: 19px;}
.small-caps {/* font-variant: small-caps; */ font-weight: bold;}

/* COULEURS */
header #midline {border-bottom:2px solid #EAEAEA;}
header #logo {
	background-image: url(../img/logo-450x130.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-attachment: scroll; 
	background-size: contain;}
header #midline { color:#FFAEC1; font-size:18px; padding: 0 18px;}
#subline .horaires { color: #808080; text-shadow: 0 1px 1px #C0C0C0;}
#subline .phone-number { border: 1px solid #2E824E; border-radius:15px; color:#5FBC52; text-shadow: 0 1px 1px #C0C0C0; box-shadow: 0 1px 1px #5FBC52;}
section.red { background: rgb(226,51,68);}
section.blue { background: rgb(23,61,150);}
section.orange { background: rgb(255,143,0);}
section.green { background: rgb(95,167,83);}
section.darkgrey { background:#444444; }
h1 { color: white;}
/*#form-slider .second-column { border-left:1px solid rgba(255,255,255,0.5);}*/

/* TITRES */
h1 { padding: 0;margin: 20px;line-height: 32px;}
#ngview h1 {
    background: #eee;
    width: 100%;
    margin: 30px 0;
    color: #333;
    padding: 25px;
}

/* Custom */
#ngview {
    margin: 0 auto 50px;
    width: 100%;
    overflow: hidden;
    padding: 0;
}
nav ul li {
    font-size: 15px;
}
nav li a {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
}
.navbar-nav > li {
    float: none !important;
    display: inline-block;
}
nav span.btn-valider {
    height: 45px !important;
    line-height: 20px !important;
    vertical-align: top;
}


/* Form slider custom css */
.step-name { color:white; font-size: 14px;}
::-webkit-input-placeholder { color:rgba(255,255,255,0.5); }/* WebKit, Blink, Edge */
:-moz-placeholder  { color:rgba(255,255,255,0.5); } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder  { color:rgba(255,255,255,0.5); } /* Mozilla Firefox 19+ */
:-ms-input-placeholder  { color:rgba(255,255,255,0.5); } /* Internet Explorer 10-11 */

select { -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input { padding: 0px;}
.step-no { border:1px solid white; background:white; border-radius:20px; display:inline-block; width:18px; height:18px; text-align: center; box-shadow: 0 1px 0 #aaa; color:rgb(226,51,68); text-shadow: 0 -1px #aaa;line-height: 18px;}
.step-desc { margin-left:15px; }
.field-input { transition: ease .2s; display:block; width:85%; min-height:35px; min-width:130px; margin: 10px auto; text-indent:5px; background:rgba(255,255,255,0.4); border:1px solid rgba(255,255,255,0.5); border-radius: 3px; color:rgba(255,255,255,0.5); text-align: left; font-size: 16px; line-height:35px; font-family: 'Arial Black';}
.field-input:active, .field-input:focus { background: white; border-color: #C0C0C0; color:rgba(0,0,0,0.5);}
.label-checkbox-input {
margin: 5px 5px 5px 2px;
color: white;
font-family: 'Arial';
font-size: 22px;
line-height: 22px;
vertical-align: bottom;
}
.btn-valider {
	/* effets */
	transition:ease .2s;
	/* bloc */
	height: 35px;
	margin-bottom:10px;
	padding: 2px 15px;
	display: inline-block;
	/* appearence */
	background-image: url(../img/btn-valider-bg.png);
	background-size: cover;
	border: 1px solid white;
	border-radius: 25px;
	/* fonts */
	color: white;
	text-shadow: 0 1px 0px #898989;
	text-align: center;
	font-size: 16px;
	line-height: 30px;
	font-family: 'Arial';
	font-weight: 100 !important;}
.btn-valider:hover {background:rgb(131, 175, 80); box-shadow:0 2px 0 white;}
.btn-valider:active {background:#2E824E; box-shadow:0 2px 0px #173D96;}
.label-selected { transtion: ease .4s; color: white; border-bottom: 1px solid white; padding:0 5px;}
.field-input:focus .label-selected { color:black;}
.input-surface { background-image: url(../img/input-surface-bg.png); background-position: right center; background-repeat: no-repeat; background-attachment: scroll;}
.form-slide3-text { font-family: 'Arial Black'; font-size:22px; color:white;}
.btn-help{ width:100px; font-family: 'Arial'; color:white; padding:5px; border:1px solid white; border-radius: 3px;}
.btn-help:hover{ font-family: 'Arial'; color:lightblue;}

/* Slideshow logos */
.slideshow {
	width: 100%;
	height: 90px;
	overflow: hidden;
	margin:20px auto;
}
.slideshow ul {
    /* 8 images donc 8 x 100% */
	width: 800%;
	height: 90px;
	padding:0; margin:0;
	list-style: none;
}
.slideshow li {
	display:block;
	width:300px;
	text-align: center;
    float: left;
}

/* LISTE DES DIAGNOSTIQUES */
.list-diagnostics { width:100%; }
.list-diagnostics td { padding: 20px 0; }
.list-diagnostics-first-col { width:60px; vertical-align: top; }
.list-diagnostics .diag-icon { width: 57px; height:57px; margin-top:5px; display: block;}
.list-diagnostics .diag-text { }
.list-diagnostics .diag-title { color:rgb(255,143,0); font-size:24px; font-family: 'Arial Black'; display:block;}
.list-diagnostics .diag-description { color:#808080; font-size:20px; font-family: 'Georgia'; display:block; }

/* CARTE DES DEPARTEMENTS */
#map {        
  max-width: 100%;
  max-height: 100%;
}
#map path {
  fill:#86AAE0;
  stroke:#FFFFFF;
  stroke-width:0.6;
  transition: fill 0.2s, stroke 0.3s;
}
#map path:hover {
  fill: red;
  stroke: #FFFFFF;
}
#map .separator {
  stroke: #ccc;
  fill: none;
  stroke-width:1.5;
}
#map .separator:hover {
  stroke: #ccc;
  fill: none;
}
#drapeau {
	position:relative;
    left: 50%;
    margin-left:-125px;
	z-index: 999;
	opacity: 0;
	max-width: 250px;
	min-height: 50px;
	background-color: rgba(255, 255, 0, 0.75);
	transition: .3s;
	border-radius:5px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.6);
	text-align: center;
	padding: 3px 0;
	color: #555;
	text-shadow:0px -1px 0px #ccc;
}
#drapeau .agent_nom {
	font-size: 20px;
	font-family: sans-serif;
	display: block;
}
#drapeau .agent_numero {
	font-size: 20px;
	font-family: sans-serif;
}
#drapeau .agent_departement {
    font-size: 20px; 
}
.visible{
	opacity: 1 !important;
}

/* Recherche agent local sur mobile */
#agentlocalresult { 
	background-color: rgba(255, 255, 0, 0.75);
	transition: .3s;
	border-radius:0 0 5px 5px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.6);
	text-align: center;
	padding: 3px 0;
	width: 320px;
	margin: 0 auto 30px;
	color: #555;
	text-shadow:0px -1px 0px #ccc;
	opacity: 0;
}
#agentlocalresult .agent_nom {
	font-size: 20px;
	font-family: sans-serif;
	display: block;
}
#agentlocalresult .agent_numero {
	font-size: 18px;
	font-family: sans-serif;
}
#cp-input {
	background: rgba(255, 255, 255, 0.17);
	border: none;
	padding:10px;
	width: 300px;
	font-size: 20px;
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* PIED DE PAGE */
.counter { text-align: center; color:white; text-shadow:0 1px 0 #666; font-family: 'Arial'; font-size: 28px; }
footer { padding: 10px; border-top:5px solid #B7B7B7; background: url(../img/footer-bg.png) repeat-x; background-size:contain; font-size: 14px; font-family: 'Arial'; color:rgba(255,255,255,0.45);}
.col-2 {
    display: inline-block;
    width: 49%;
}
footer .col-4 { display: block;max-width: 100%; 
        text-align: center;vertical-align: middle;padding: 10px; }

/* RESPONSIVENESS FOR MOBILES: 
414px is the width of the iphone 6+ the biggest screen around */
@media screen and (max-width: 570px) {
	#recherche-agent-web { display: none; }
	#recherche-agent-mobile { display: block; }
    .hide-mobile {display:none;}
    .tr-pc { display:none; }
	.ljd-item { max-width: 73vw;}
    
}
@media screen and (min-width: 571px) {
	section,header,footer { padding: 3px 10%;}
	#recherche-agent-web { display: block; }
	#recherche-agent-mobile { display: none; }
    .inline-block { display:inline; }
    .tr-mobile { display:none; }
    .phone-number { font-size: 24px;}
}
@media screen and (min-width: 1152px) {
    footer .col-4 { display: inline-block;max-width: 33%;
        vertical-align: middle;padding: 10px;}
}
/* CHANGEMENTS SUR LE CODE IMPORTE */
#box_resume {
    padding-left: 30px !important;
    box-shadow: none !important;
    transition: ease .2s;
    margin-bottom: 10px;
    display: block;
    background-image: url(../img/btn-valider-bg.png) !important;
    background-color: transparent !important;
    background-size: cover !important;
    border-radius: 0px;
    color: white;
    text-shadow: 0 1px 0px #898989;
    font-size: 16px;
    line-height: 30px;
    font-family: 'Arial';
    font-weight: 100 !important;
}
#box_resume h4 {
    color: white;
}
.ljd-item {
    background: #fff;
}
ul.lcd {
    color: #444;
}