/* Styles communs */
/* @import url (https://fonts.googleapis.com/css?family=Tangerine:200,300 ) ;  
@import url(https://fonts.googleapis.com/css?family=Roboto: 300, 400); */
@import url('https://fonts.googleapis.com/css2?family=Calibre:wght@300;300&display=swap');

/*** Balises ***/
 
 .embed-responsive-10by3 { 
  padding-top: 30%; 
}
 

/*  FIN MENU */
body,td,th {
	margin:2px;
	padding:2px;
	background-image: url('../images/68_haut-rhin.avif');	 
/*	background-image: url('https://www.diag68.fr/images/68_haut-rhin.jpg'); */
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-style: small-caption;
 
	font-family: Calibre 'Open Sans', ;
	font-size: 15px;
	color : #483D8B;
}

/* _transitions.scss:11 
.collapse {
  &:not(.show) {
    display: none;
  }
 */}

.sub_div {
        position: absolute;
        bottom: 0px;
		position: fixed;
        }

h1 {
	font-size: 1.15em;
	line-height:0.9em;
	color: #2A0BEF;
	word-spacing: 4px;
	text-align: justify;
	letter-spacing: 1.2px;
	font-family: Verdana, 'Open Sans', sans-serif;
	text-shadow: 3px 3px 6px #aaf;
	-webkit-transition: all 2s ease-in-out 3s;
	-moz-transition: all 2s ease-in-out 3s;
	-ms-transition: all 2s ease-in-out 3s;
	-o-transition: all 2s ease-in-out 3s;
	transition: all 2s ease-in-out 3s;
	}
h2 {
	font-size: 1.2em;
	color: #2A0BEF;
	font-weight: bold;
	text-shadow: 3px 3px 5px #aaa;
	-webkit-transition: all 2s ease-in-out 3s;
	-moz-transition: all 2s ease-in-out 3s;
	-ms-transition: all 2s ease-in-out 3s;
	-o-transition: all 2s ease-in-out 3s;
	transition: all 2s ease-in-out 3s;
}
hr {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    border: 0 none;
    clear: both;
    color: #d6e1ef;
    height: 1px;
	
    width: 100%;
}
.infocp {
            animation: bounceIn ease 8s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
			animation-delay: 4.9s;
			font-size: 12px;
			word-spacing: 2px;
			padding-top: 10px;
			color : #168029; 
			text-shadow: 3px 4px 6px #aaa;
        }


header, footer {
	background-color: none;
	
}
header {
	background-color: none;
	position: relative; 
}

main {
		overflow: auto;
    }
 
article {
	background-color: rgba(240, 248, 255 0.6); /* 0.5 - semi-transparent */	
	box-sizing: border-box;
	float: left;
	padding: 4px;
	text-align: justify;
	color : #483D8B;
	}

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

.former_toucher {
  	background-image: url("https://www.diag68.fr/img/former_toucher.gif") no-repeat center fixed;
    background-size: contain;
}
.santee {
    background: url("images/demolition_02.jpg")  0.5 - semi-transparent ;
	}  

h1, p {
	margin: 0;
}

	
footer
{
    width: 100%;
 /***   height: 90px; ***/
    clear: both;
    text-align: center;
    bottom: 0;
	position: fixed;
  }
	

footer div {
	float: center;
	text-align: center;
	font-style: small;
 /*	background-color: #f7f5e8; */
	max-width:960px;
	margin-left: auto;
	margin-right: auto;	

}

/*** Classes ***/
.container {
	background-repeat: repeat;
	margin: 1px auto;
	width: 100%;
	color: none;
}

/*** Identifants ***/
#wraper {
	max-width:960px;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(240, 248, 255, 0.9); /* 0.5 - semi-transparent */
	
    
}
#titre-h1 {
	position:absolute;
	width:960px;
	margin-left: auto;
	margin-right: auto;
	text-align: center; 
	/* top: -5px; */
}

/***  Animation  ***/



/*** Responsive ***/
@media screen and (min-width: 320px) {
	div.pied-gauche {
		display: none ;
	
	}
	header {
	background-color: none;
	}
	

.container {
	background-repeat: repeat;
	margin: 2px auto;
	width: 100%;
	color: none;
}

}

@media screen and (min-width: 768px) {
	.container {
		width:100%;
	}
	main article:nth-child(2n+1) {
		clear: both;
	}
	article {
		width: 50%;
		background-image: none	
		color : #483D8B !veryimportant ;
	}
		div.pied-droite {
		display: block ;
	}
	footer div.pied-gauche {
		width: 40%;
	}
	footer div.pied-droite {
		width: 60%;
	}
}

@media screen and (min-width: 790px)  /* 990px  */{
	.container {
		width:98%;
			
	}
	main article:nth-child(2n+1) {
		clear: none;
	}
	main article:nth-child(4n+1) {
		clear: both;
	}
	article {
		width: 33.3333%;
	}
	div.pied-droite {
		display: block ;
	}
	footer div.pied-gauche {
		width: 40%;
	}
	footer div.pied-droite {
		width: 60%;
	}
}

   @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 2.5rem;
        }
      }

      .b-example-divider {
        height: 2rem;
        background-color: rgba(0, 0, 0, .1); 
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 90vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.5rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }


xxx {
  animation-duration: 2s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 200%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}