@charset "UTF-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
.row::after {
  content: "";
  clear: both;
  display: table; 
}
html {
  scroll-behavior: smooth;
}
/*bp sticky
#myTopnav{position:fixed;}
*/
header { height:auto;border-bottom:groove black;  background-color:white; box-shadow:5px 5px 12px ; margin:auto; top:0; z-index:90;
	}
	@media only screen and (min-height: 600px) and (min-width: 1025px){
  header { position:fixed; width:100%; }
  .art {margin-top:220px; }
  .artblanc {margin-top:220px; }
  .articleaside { position:fixed; margin-left:780px; max-width:230px;top:250px;}
  
}
@media only screen and (max-height: 600px) and (min-width: 1025px){
  .art {margin-top:20px; }
  .artblanc {margin-top:20px; }
  .articleaside {  margin-top:60px;margin-left:20px; max-width:230px;}
  
}
@media only screen and (min-height:600px) and (min-width: 600px) and (max-width: 1025px) {
	 header { position:fixed; width:100%; }
	.art {margin-top:220px; }
	.artblanc {margin-top:220px; }
	.articleaside { position:fixed;right:4px; max-width:230px;top:250px;}
}
@media only screen and (max-height: 600px) and (min-width: 600px) and (max-width: 1025px) {
	.art {margin-top:20px; }
	.artblanc {margin-top:20px; }
	.articleaside {  margin-top:60px;margin-left:10px;}
}
@media only screen and (min-height: 600px) and (max-width: 600px){
	 header { position:fixed; width:100%; }
	 .art {margin-top:220px; }
	 .artblanc {margin-top:220px; }
	 .topnav { position:fixed; width:100%;}
}
@media only screen and (max-height: 600px) and (max-width: 600px){
	.art {margin-top:20px; }
	.artblanc {margin-top:20px; }
}
	body { margin:0; padding:0; background-color:white;}
	.cont{ position:relative; max-width:1025px; margin:auto; background-color:  ; z-index:0; }
	.photohomerub { display:block; width:50%; margin-left:auto; margin-right:auto; border:1px solid black;}
	.contimghome { margin-left:auto; margin-right:auto; }
	.parrub { position:relative; padding:15px; margin-left:8.335%; margin-right:8.335%; margin-top:30px; margin-bottom:0px; border-bottom:4px solid rgba(254,00,00,1.00);border-top:2px solid ; display:inline-block; float:left;background-color: rgba(245,245,245,1.00)}
		.parrubsession { position:relative; margin-left:8.335%; margin-right:8.335%; margin-top:30px; margin-bottom:0px; display:inline-block; float:left;}
		.imghomesession { margin-left:auto; margin-right:auto; display:block; border: 1px solid black; }
	.photohome {  display:block; max-width:100%; margin:10px; margin-left:auto; margin-right:auto; border:1px solid black;}
	.parhome {padding:10px; margin:10px; background-color:grey;}
	.lire { position:relative; background-color:black; opacity:0.9; color:white; font-size:12px; height:25px; padding:8px; text-decoration:none; border-radius:48%; margin:10px;}
	.lire:hover { background-color:black ; opacity:0.4;}
	.logo {  max-width:100%; display:block; margin-left:auto; margin-right:auto; }
	.link { color:red; text-decoration:none; font-size:18px; opacity:1; font-weight:bold; text-transform: ;}
	.link:hover { opacity:0.6;}
.clearfix {
  overflow: auto;
}
	nav{ display:inline-block; }
	nav ul{list-style:none; border:solid black 1px; position:fixed ;top:0;max-width:1025px;height:50px;background-color:white; z-index:10; padding:0; margin:0;}
	nav li{display:inline-block; padding:10px; max-width:1025px;}
	nav a { font-family:Arial;font-size:20px; color:#c55b11; padding-bottom:0px; text-decoration:none; margin:10px }
	nav a:hover { color:#538234; }
/* bypass styky	
.sticky {
  position: fixed;
  top: 0;
  width: 1025px;
}
.sticky + .cont {
  padding-top: 60px;
}
*/
	.topnav {
  overflow: hidden;
  background-color: #333; 
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;font-family:Arial; letter-spacing:1px;
}

.topnav a:hover {
  
  color:grey;
}

.topnav a.active {
  color: red;
}

.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block; color:white;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
	.arthead { border-bottom:2px solid black; border-top:2px solid black; padding:10; margin:10px;}
	.partsocial{ border-bottom:2px solid black; border-top:2px solid black; padding:10px; margin:10px; }
	.partage{position:relative; background-color:rgba(0,0,0,1.00); color:white; padding:6px; text-decoration:none; opacity:0.5;}
	.partage:hover {opacity: 0.8; color:red;}
	.art{max-width:px; float:left;padding-top:20px; padding-bottom:20px;background-color: rgba(245,245,245,1.00); z-index:0 ;}
	.artblanc{max-width:px; float:left;padding-top:20px; padding-bottom:20px;background-color: white; z-index:0 ;}
	.articleaside {background-color:white;
	text-align:center; z-index:19;
	}
	
	.parallax {
  background-image:url(image/ArtMixage/jh24.jpg);
  min-height: 300px;
  /* scrolling effect */
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover; margin:;
}
	.imgaside { max-width:75% ; height: ; border:1px solid black; border-radius:1px;}
	.imgaside:hover { opacity:0.6; }
	.ancres { font-size:15px; color:#c55b11; text-decoration:none;}
.asideul{list-style:none; }
.asideli { display:inline-block; margin-right:39px; margin-left:0; margin-top:15px;}
.asidea{ font-size:15px; color:black; text-decoration:none;}
.asidea:hover{ opacity:0.7;}	
	
	.pied { position:relative; max-width: 100%; height: 100px; border-top:groove black; background-color:#333 ; box-shadow:5px 5px 12px; margin:auto; z-index:99;}	
.social {display:inline-block; position:relative; margin-top:35px; margin-left:15px}
.fa {  padding: 10px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;border:1px groove black }
.fa:hover {
  opacity:0.7; background-color:grey; color:red;}
  .fa-facebook {
  background: grey;
  color: white;}
    .fa-instagram {
  background: grey;
  color: white;}
  .fa-youtube {
  background: grey;
  color: white;}
   .fa-envelope {
  background: grey;
  color: white;}

.rthdp { display:inline-block ;font-size:20px; width:45px; color:white; background:black; text-decoration:none; text-align:center; border-radius:50%; padding:10px;border:1px solid white; margin:10px; opacity:0.6;}
.rthdp:hover { opacity:0.8; }
div.fixed {
  position: fixed; z-index:99;
  bottom: 0;
  right: 0;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
#myBtn { margin-left:150px; background-color: #333;
  border: none;
  color: white;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; }
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
	
h1 { text-align:center; font-size:20px;}
h2 {font-family:arial; font-size:20px; color:rgba(254,00,00,1.00);}
.H2link{ text-decoration:none; color:black; }
.H2link:hover { opacity:0.6; }
h4 { font-family:arial;text-align:left; font-size:15px; ; letter-spacing:1px;padding:15px; background-color:; border-left:2px solid red; border-radius:10px;max-width:480px; margin-left:10px;line-height:1.4; font-style:italic; margin-top:10px;}
h5{ font-family:arial;text-align:center; font-size:18px; color:rgba(254,00,00,1.00);}
.H5link{ text-decoration:none; color:
black; }
.H5link:hover { opacity:0.8; }
p {  font-family:arial; font-size:14px; }
.head { font-family:arial; font-size:18px; color:black; text-decoration:none; opacity:0.6; }
.head:hover {opacity:1.1; }
.audio { font-family:verdana; font-size:16px; text-align:right; margin-right:15px; }
b {color:red}
.style { text-align:justify; padding:20px; font-family:arial; font-size:15px; letter-spacing:1px; line-height:1.4; color: black;}
.stylehome {padding:10px; font-family:arial; font-size:15px; letter-spacing:1px; line-height:1.4; color: black;}
.blanc { background-color:white; padding-top:20px; padding-bottom:10px ; }
.parintro { padding:15px; backgroundcolor:rgba(207,207,207,1.00);border-radius:10px; font-size:16px;}
.para { border-left:1px solid black; background-color:;border-radius:;  padding-right:40px; margin-left:10px;}
.parb { border-right:1px solid black;background-color:;border-radius:;  padding-left:40px; margin-right:10px;}
.parc { border-left:1px solid black;border-radius:10px; background-color:; margin-left:40px;}
.pard { border-left:1px solid black;border-radius:10px; background-color:;margin-left:40px;}

.parl { border-left:2px solid red; margin-right:20px; margin-top:0; margin-bottom:0;padding-top:20px; padding-bottom:20px; margin-left:10px; }
.parr { backgroundcolor:#; border-right:2px solid red; margin-left:20px; margin-top:0; margin-bottom:0;padding-top:20px; padding-bottom:20px; margin-right:10px;}
.parwhitel { background-color:rgba(255,255,255,1.00); border-left:px solid grey; padding-right:20p; margin-top:0; margin-bottom:0px; padding-top:20px; padding-bottom:20px;}

.lienpopup { display:inline-block; border: 2px solid red; border-radius:10px; width:300px; }
em { font-style:normal; font-weight:bold; font-size:15px; color:black;}
strong { font-size:18px; font-weight:bold; color:black;}
.acc { font-size:18px; font-weight:bold; padding-left:100px; padding-right:50px; padding-top:40px; padding-bottom:40px; background-color:white; color:black;}
	.imgarticleleft { margin-left:15%; max-width:70%; }
.imgarticleright {  max-width:90%; margin-left:5%; padding-bottom:50px; background-color:#; }
.imgarticlecenter {  max-width:100%; }
.imgarticleinsertleft {  max-width:100%; float:left; margin-right:30px;  }
.imgarticleinsertright {  max-width:100%; float:right; margin-left:30px;  }
.imgarticletriptyque { max-width:80%; margin-left:10%;  }
	[class*="col-"] {
  float: left;
  padding: ;
}
@media only screen and (min-width: 1025px){
	
	/* For large desktop: */
.col-l-1 {width: 8.33%;}
.col-l-2 {width: 16.66%;}
.col-l-3 {width: 25%;}
.col-l-4 {width: 33.33%;}
.col-l-5 {width: 41.66%;}
.col-l-6 {width: 50%;}
.col-l-7 {width: 58.33%;}
.col-l-8 {width: 66.66%;}
.col-l-9 {width: 75%;}
.col-l-10 {width: 83.33%;}
.col-l-11 {width: 91.66%;}
.col-l-12 {width: 100%;}


.art {margin-left:25;}
.topnav{ width:100%;}
}
@media only screen and (min-width: 768px) and (max-width: 1025px){
	
	/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 23%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


}
@media only screen and (min-width: 600px) and (max-width: 768px) {
	/* For tablets: */
.col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 23%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  
 

  
  }
  
@media (max-width: 600px){
	  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;}
	.articleaside {margin-top:50px; margin-left:auto; margin-right:auto;}
	.art { margin-left:auto; margin-right:auto;}
	.artblanc { margin-left:auto; margin-right:auto;}
	#slideshow{ display:block; margin-left:auto; margin-right:auto;}
	.vishome {
    background-attachment: scroll; 
  }
  .parrub { margin-left:0; margin-right:0; margin-top:15px; }
   .parrubsession { margin-left:0; margin-right:0; margin-top:15px; }
}
.contactcont { max-width:80%; background-color:rgba(245,245,245,1.00); height:650px; margin:auto; padding:20px; margin-top:30px; margin-bottom:30px;}
.inputmail { display:block; width:30%; height:30px; margin:auto;}
.textarea { display:block; margin:auto; width:70%; height:300px;}
.labelcontact { display:block; text-align:center; margin:auto;}
.envoyer { display:block; margin:auto;}