.titre {
    font-size: 3.5rem;
}
.start-50 {
  left: 50% !important;
}
.top-50 {
  top: 50% !important;
}
.bottom-10 {
  bottom: 10% !important;
}
.wbottom-0 {
  bottom: 0 !important;
}

.translate-middle {
  transform: translate(-50%,-50%) !important;
}

.logo{
	height:90px;
	width:100px;
	}

hr { 
  border-color:#05087D;
  
} 

a:hover {
	text-decoration: none;
	}
	
.wwwbgimg-1 {
  background-color: #cccccc;	
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;  
  background-image: url('../img/carousel/mecanique-marine.jpg');
  background-size: cover;
  min-height: 500px;
}

 
#back-to-top{
	position: fixed;
    z-index:9000;
    right:0px;
    bottom:0px;
	background-color:#05087D;
}

#back-to-top a.btn:hover {
	background-color:var(--red);
}

#mentions {
color:#05087D;
}

p.lead, ul.lead{
color:#05087D;
font-weight:400;}

#container-contacter{
margin-top: 1rem;
}

.carousel-caption h1,.carousel-caption h2 {
	  border:none;
	  text-shadow: -2px -2px 3px #241d1c;
	}
	
#liste-moteurs a, #pieces-detachees a, #saildrive a {
    color:#000;
}
#liste-moteurs a:hover, #pieces-detachees a:hover, #saildrive a:hover{
    color:red;
    text-decoration: none;
}	
/*
la barre de navigation (header) du site est en position fixe, toujours collée au haut de la page,
et elle cache la partie haute des zones cibles (ancres). probl&egrave;me contourn&eacute; par du CSSEviter ce probl&egrave;me est en fait tr&egrave;s simple grâce &agrave; une petite astuce CSS : le s&eacute;lecteur :target nous permet de cibler les &eacute;l&eacute;ments (<div> ou autres) qui sont les cibles actuelles sur notre page. Imaginons que notre URL pr&eacute;sente une ancre #contenu, la <div id=’contenu’>…</div> sera la seule cibl&eacute;e avec le s&eacute;lecteur CSS div:target. Aucune autre div ne sera cibl&eacute;e, le s&eacute;lecteur CSS :target nous permet donc de styliser uniquement l’&eacute;l&eacute;ment HTML qui nous int&eacute;resse sur la page.
L’astuce est d’appliquer un padding-top sur l’&eacute;l&eacute;ment cibl&eacute;, de la taille de la hauteur de l’ent&ecirc;te.
Un padding-top ne risque-t-il pas de d&eacute;caler notre &eacute;l&eacute;ment vers le bas et d’ajouter une marge inutile ?
Tout &agrave; fait ! Notre &eacute;l&eacute;ment sera d&eacute;cal&eacute; vers le bas, mais le navigateur scrollera jusqu’au haut de notre div cible qui pr&eacute;sente d&eacute;sormais un espace vide
avant son contenu ; cet espace vide cr&eacute;&eacute; grâce au padding-top nous permet d’y « caler » l’ent&ecirc;te.
En contrepartie, on applique une margin-top n&eacute;gative de la m&ecirc;me taille afin d’annuler l’espace cr&eacute;&eacute; dans la page.*/


#mybreadcrumb .list-group-item {
	background-color:transparent;
}

.ombre2{box-shadow:0 4px 20px 0 rgba(22,22,22,0.4);}


#navbarre a { 
    color:#05087D;
	background-color:transparent;
}

#navbarre a.btn:hover, #navbarre a.btn:active, #navbarre a.btn:focus, #navbarre a.navbar-brand .btn-outline-warning:hover {
    color:#fff;
	background-color:#05087D;
    text-decoration: none;
	box-shadow: unset;
}
#navbarre ul{
	  border-style: none;
	}
	
#mp:hover {
	color: #05087D;
	border-color:#05087D;
}

.dropdown-menu li a {
  color: #fff !important;
}
.dropdown-menu li a:hover {
  background-color: var(--red) !important;
}
.dropdown-menu {
    background-color: #05087D;
}

.fermer {
    color: var(--white);
	opacity: 08;
}

.fermer:hover, .fermer:focus, .fermer:active  {
    color: var(--red);
}

.fond1 {
  background-color: #fff;
  background-repeat: repeat;
  background-image: url("../img/fond1.jpg");	
}

.wwwfull-screen {
  background-color: #2856a7;
  background-image: url("../img/aaaa.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
	
.bg-bleu-radice {background-color: #223651;}

.bg-bleu-perkins {background-color: #1f377d;}

.bg-bleu-mp {background-color: #040762;}

#marques {background-color: #fff;}

.borderb-bleu-mp {border-bottom: 1px solid #05087D;}

.bleu-mp {color: #05087D;}

.bleu-fonce-mp {color: #040762;}

.rouge {color: var(--red);}

.btn-outline-bleump {
	color: #05087D;
	border-color:#05087D;
}

.btn-outline-bleump:hover {
	color:#fff;
	background-color:#05087D;
	border-color:#05087D;
}


.w-250{
  min-width: 250px;
  max-width: 250px;
}

.w-200{
  min-width: 200px;
  max-width: 200px;
}

.mt100{
  margin-top: 100px;
}

.pt-8px {
    padding-top: 8px;
}

.accentue{
	font-weight: 600;
	font-size: 1.25rem;
}


/* Media queries
-------------------------------------------------- */


/* Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { }

/* Medium devices (tablets, 768px and up)*/
/*@media (min-width: 768px) and (max-width: 991.98px) {}*/

/* Large devices (desktops, 992px and up)*/
/*@media (min-width: 992px) and (max-width: 1199.98px) {}*/

/* Extra large devices (large desktops, 1200px and up)*/
/*@media (min-width: 1200px) {}*/

/* Extra small devices (portrait phones, less than 576px)*/
/*@media (max-width: 575.98px) {}*/

/* Small devices (landscape phones, less than 768px)*/
/* @media (max-width: 767.98px) { .breadcrumb a {
color: red;}}*/

/* Medium devices (tablets, less than 992px)*/
/*@media (max-width: 991.98px) {}*/

/* Large devices (desktops, less than 1200px)*/
/*@media (max-width: 1199.98px) {}*/

/* Extra large devices (large desktops)*/
/* No media query since the extra-large breakpoint has no upper bound on its width)*/

@media only screen and (max-width: 575.98px) {
	.full-screen {background-image: none;}
	h1 {border:none;}
	#back-to-top img {width:24px;height:24px;}
	
	.titre {
    font-size: 2.5rem;
	}
}

@media only screen and (min-width: 767.98px) {
	#marques {background-color: transparent;}
}

@media only screen and (max-width: 991.98px) {
	h1 {
	  font-size: 2rem;
	}
	h2 {
	  font-size: 1.5rem;
	}
	#navbarre .btn{
	  text-align: left;
	  border:none;
	}
	#navbarre ul{
	  border-top: 1px solid #05087D;
	}
		
	
	
}