:root {
  --moilien: #56b0fd;
   --survollien: #E96835;
   --cassiopeia-color-primary : #546D83; /* debut fond header*/
  --cassiopeia-color-link: var( --moilien); /*couleur des lien */
  --cassiopeia-color-hover: var( --survollien); /* fin fond header*/
  --body-bg: #7e97a9 ; /*#635549 ;#c9d5ed*/
  --link-color:var( --moilien); /*couleur des lien */
}
.container-header {
  background-image:  url('fondsiteLarge.JPG');
  background-size: cover;
  border: solid;
  border-radius: 26px;
}
a:hover, a:active{
  color:var( --survollien) !important;
}
a:not([class]) {
  text-decoration: none !important;
}

.card {
  background-image:  url('fondsiteLarge.JPG');
  background-size: cover;
   background-position: center;
  font-weight: bold ;
  border-color: black;
}
.hautem {
	background-image:  url("../../../../../images/moi/montagne.jpg");
  background-size: cover;
  background-position: center;
 text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}
.ski {
	background-image:  url("../../../../../images/moi/skip.jpg");
  background-size: cover;
  background-position: center;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}
.rocher {
	background-image:  url("../../../../../images/moi/rocher.jpg");
  background-size: cover;
  background-position: center;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}
.canyon {
	background-image:  url("../../../../../images/moi/canyon.jpg");
  background-size: cover;
  background-position: center;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}
.qui {
	background-image:  url("fondsiteLarge.JPG");
  background-size: cover;
  background-position: center;
  text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}
body.site {
	background: transparent;
	background-image : linear-gradient(#6D6F6F,#7e97a9) ;
	background-position: top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover; 
}
.container-header .mod-menu {
    color: var( --moilien);
  font-weight: bolder ;
  background-color: transparent ;
}
.header .mod-menu > li {
border: 3px solid #dfe3e7;
border-radius: 5px;
border-color : var( --moilien);
}
.metismenu.mod-menu .parent>ul {
    color: var( --moilien);
}
.mod-list li.active>a {
	color: var( --survollien);
}
.breadcrumb-item.active {
    color: var( --survollien);
}
.container-header .mod-menu>li>a:hover {
  color: var( --survollien);
}
.container-below-top, .container-topbar {
    color: var(--body-color);
  font-weight: bold
}
.btn-secondary {
    background-color: var( --cassiopeia-color-primary);
    border-color: black;
    color: var( --moilien);
}
video {
	max-width: 100%;
	height: auto;
}