@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Fjalla+One'); /* font-family: 'Fjalla One', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display'); /* font-family: 'Playfair Display', serif; */
@import url('https://fonts.googleapis.com/css?family=Tangerine'); /* font-family: 'Tangerine', cursive; */
@import url('https://fonts.googleapis.com/css?family=Raleway');



/* Header */
#logo {text-align:left; padding:10px 0}
#slogan p {font-size:20px; font-family:Arial, Helvetica, sans-serif; text-align:right}
@media (max-width: 992px) {
#logo {text-align:center}
#slogan p {font-size:18px;text-align:center}
}
/*header*/
p, table, ul li{font-family: 'Raleway', sans-serif;font-size:14px}
h1 {font-family: 'Playfair Display', serif; font-size:4rem; background: url(../charte/initiale-titre.jpg) no-repeat left top;padding-left: 70px; height: 110px; line-height: 50px}



@media (max-width: 1200px) {h1 { font-size:3rem;}}
@media (max-width: 992px) {h1 { font-size:2.5rem;}}
@media (max-width: 767px) {h1 { font-size:2rem;line-height: 40px}}

h2{font-family: 'Playfair Display', serif; }



h3 {font-family: 'Fjalla One', sans-serif; font-weight: normal; text-transform: uppercase}
.text-primary{color:#1c5582!important;font-family: 'Fjalla One', sans-serif;font-size:18px}
.text-secondary{color:#fff!important;font-family: 'Fjalla One', sans-serif;font-size:18px}
.text-info{color:#fff!important;font-size:16px}
.mt-1{margin-top:1em}
.mt-2{margin-top:2em!important}
.mt-3{margin-top: 3.5em;}
.fa-clock{color:#fff}
.small, small {font-size: 95%;}
.bg-primary{padding:1em;border-radius:6px;background-color:#1c5582}

@media (max-width: 992px) {.bg-primary{margin-bottom:1em}}
@media (max-width: 767px) {.bg-primary{margin-bottom:1em;margin-top:1em}}

.bg-secondary{border:3px solid #1c5582;padding:0.5em;width:70%;margin:auto}


@media (max-width: 992px) {.bg-secondary{margin-bottom:1em}}


.btn-primary{background-color:#fff!important;border:1px solid #ccc;color:#333!important}
.bg-info{background-color:#fff!important;padding:1em;border-radius:6px;border:1px solid #ccc; /*min-height: 1400px*/}

@media (max-width: 767px) {.bg-info{margin-top:1em}}


table td{padding:0.5em;}
.gris1{background-color:#eae8e8}
ul.list-group{margin-left:2em}
.text-warning{color:#A2090C}


#width{width:100%}


#height{height: 67em;}

@media (max-width: 1200px) {
	#height{height: 63em;}
}

@media (max-width: 992px) {
	#height{height: 64em;}
}
@media (max-width: 767px) {
	#height{height: auto;margin-top:1em}
}


#height2{height: 7em;}
@media (max-width: 1200px) {
	#height2{height: auto;}
}



.modal-dialog {
    width: 70%;
	margin-top:6em;
}

@media (max-width: 767px) {.modal-dialog {
    width: 95%;

}}




.modal-content{background-color:#000;color:#fff}
.modal-footer {
    border-top: none;
}



.close {opacity:1;color:#fff}
.section-title {
    text-align: center;
    position: relative;
}

.section-title:before {
    content: "";
    left: 0;
    right: 0;
    height: 1px;
    background: #000;
    position: absolute;
    top: calc(50% - 1px);
}

.section-title span {
    display: inline-block;
    padding: 0 40px;
    background: white;
    position: relative;
    z-index: 1;
}
/*MENU*/
a.apeller {display:none}

.affix {
top: 0;
width: 100%; z-index:99999
}

.affix .navbar-nav { float: right; text-align:right}
  
  
 @media (max-width: 767px) { 
.affix .navbar-nav { float: none; text-align:center}
 }
  
.affix a.apeller {display:block; position:absolute; margin:0px}

.affix + .container-fluid {
      padding-top: 70px;
}



.navbar-nav {
width: 100%;
text-align: center;
}
	  
.navbar-nav li {
float: none;
display: inline-block;
}

 @media (max-width: 767px) { 
	 
.navbar-nav {
width: auto;
text-align: center;
} 
	 
.nav > li {
    position: relative;
    display: block;
}
}


.navbar-brand {position:absolute; padding: 0px; margin: 0px}





.navbar {
    min-height: 40px;
    margin-bottom:0px;
    border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent; border-radius:0px
}


.navbar-default {
    background-color: #fff;
    border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #000;
}
.navbar-default .navbar-nav > li > a {
    color: #000;
}
.nav > li > a {
    padding: 13px 10px 8px;
    color: #fff;
    font-size: 16px;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	border-bottom: 5px solid #fff;
}
.affix .nav > li > a {font-size: 14px;padding: 13px 10px 8px;}
.affix .navbar-collapse.collapse {width:calc(100% - 100px); float: right }

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    border-bottom: 5px solid #1c5582;
	color:#1c5582
}

.nav > li > a.current
{
border-bottom: 5px solid #1c5582;
	color:#1c5582
}

/*Fin MENU*/


/*footer*/
footer {background:#eee; padding: 20px}

div#logo-distributeur > a {text-decoration:none;display:block;width:50px;height:70px;background:none no-repeat top left transparent;position: absolute;right:10px;}
div#logo-distributeur > a.distal {background-image:url('../charte/logo-al.png')}
div#logo-distributeur > a.distar {background-image:url('../charte/logo-ar.png')}
div#logo-distributeur > a.distco {background-image:url('../charte/logo-co.png')}
div#logo-distributeur > a.disteo {background-image:url('../charte/logo-eo.png')}
div#logo-distributeur > a.distsi {background-image:url('../charte/logo-si.png')}


#liens-referencement {font-size:11px;text-align:center}
#liens-referencement a {color:#0000FF}
/*fin footer*/

.bt-rond { height: 35px; width: 35px; border-radius: 100%;  line-height: 35px; text-align: center; float:right;margin:30px 5px 20px; border:1px solid #1c5582;background: #fff;color:#1c5582}
.bt-rond:hover {color:#fff;background: #1c5582;}


.tendances {font-family: 'Fjalla One', sans-serif;text-transform: uppercase; float:right; margin:30px 5px 20px ; line-height:30px; text-align: center; width:200px; font-size:16px;border:2px solid #1c5582;background: #fff; color:#1c5582; border-radius:3px   }
.tendances:hover {border:2px solid #1c5582;background: #1c5582; color:#fff; }



.tendances2 {font-family: 'Fjalla One', sans-serif;text-transform: uppercase; float:right; margin:0px 5px 0px ; line-height:30px; text-align: center; width:200px; font-size:16px;border:2px solid #ab0000;background: #fff; color:#ab0000; border-radius:3px   }
.tendances2:hover {border:2px solid #ab0000;background: #ab0000; color:#fff; }




#slogan p.accroche {margin:0px 0px 10px ; line-height:30px; text-align: center;clear: both;font-family: 'Tangerine', cursive; font-size:36px; padding-left:200px }

@media (max-width: 720px){
#slogan p.accroche {margin:0px 0px 10px ; line-height:30px; text-align: center;clear: both;font-family: 'Tangerine', cursive; font-size:36px; padding-left:0px }
}

@media (max-width: 994px) { /* Remplacez 123px par la taille de votre choix */
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* cette classe est à ajouter lorsque que vous utilisez une version de Bootstap supérieure ou égale à la 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
	.affix .nav > li > a {font-size: 13px;padding: 13px 5px 8px;}
	.affix .navbar-collapse.collapse {width:100%; float: none }
}


.tampon1 {
width: 150px;
height: 150px;
border-radius:100%;
background: #fff;	
border:1px solid #1C5582;
color:#1C5582;
text-align:center;
padding: 40px 0px;	
position: fixed;
z-index: 9999;
font-weight: bold;
font-family: 'Playfair Display', serif;
font-size:20px; 
margin-left: 960px;
margin-top:320px;
transform: rotate(-15deg);
display:block	
}

.tampon2 {
display:none	
}	


@media (max-width:1200px) { 	
.tampon1 {
display:none	
}	
	
.tampon2 {
width: 100%;
height: 50px;
border-radius:0%;
background: #fff;	
border:1px solid #1C5582;
color:#1C5582;
text-align:center;
padding: 20px 20px 50px ;	
position: relative;
font-weight: bold;
font-family: 'Playfair Display', serif;
font-size:20px;
margin-left:0px;
margin-top:0px;	
transform: rotate(0deg);
display:block	
}
}