body{
overflow-x: hidden; max-width:100vw;
}
.nav {
  overflow: hidden;
  background-color: #014b88; float: left; top:0px; position:absolute; width:100vw; z-index:100;
}

.nav a {
float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.nav a:hover {
  background-color: #003366;
color: #ffffff;
}

.nav a.active {
  background-color: #014b88;
  color: white;
}

.nav .icon {
  display: none;
}




.container2 {   position: relative; }
.container3 {   position: relative; }
.overlayb {   position: absolute;   top: 0;   bottom: 0;   left: 0;   right: 0;   height: 100%;   width: 100%;   opacity: 0;   transition: .5s ease;   background-color: #ffffff; }

.container2:hover .overlayb {   opacity: 1; }
.container3:hover .overlayb {   opacity: 1; }
.text {   color: white;   font-size: 20px;   position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);   text-align: center; }


.gallery { 	display: flex; 	flex-wrap: wrap; 	/* Compensate for excess margin on outer gallery flex items */ 	margin: -1rem -1rem; }

.gallery-item { 	/* Minimum width of 24rem and grow to fit available space */ 	flex: 1 0 24rem; 	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */ 	margin: 1rem; 	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4); 	overflow: hidden; }

.gallery-image { 	display: block; 	width: 100%; 	height: 100%; 	object-fit: cover; 	transition: transform 400ms ease-out; }

.gallery-image:hover { 	transform: scale(1.15); }

/*


@supports (display: grid) {
	.gallery { 		display: grid; 		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); 		grid-gap: 2rem; 	}
	.gallery, 	.gallery-item { 		margin: 0; 	} }

.navbar { letter-spacing: 2px;   overflow: hidden;   background-color: #014b88; z-index:200;   width: 100vw;   font-size: 20px; }

.navbar a {   float: left;   font-size: 20px;   color: white;   text-align: center;   padding: 14px 16px;   text-decoration: none; }
.navbar a:hover, .dropdown:hover .dropbtn {   background-color: #014b88;   color: white; }



/* Create three equal columns that floats next to each other */
.column {   float: left;   width: 30.33%;   padding: 10px;   background-color: #ffffff;   min-height: 100vh; height:auto; }
.column a {   float: none;   color: black;   padding: 16px;   text-decoration: none;   display: block;   text-align: left; }
.column a:hover {   background-color: #014b88; }

/* Clear floats after the columns */
.row:after {   content: "";   display: table;   clear: both; }


.footer2 a{   color:#ffffff; }
.footer2{ color:#99ccff;   background-color: #014b88; padding:5%; }
 .portfolio{   top:50vh; }
 .column2 {   padding: 8px; }

.column2 {   float: left;   width: 30.33%;   display: none; /* Hide all elements by default */ }
.column3 {   float: left;   width: 30.33%;   padding: 8px; }
.btn  {   border: none;  display:inline-block;  float:left; outline: none;   padding: 12px 16px; background-color: #014b88; color:#ffffff;   cursor: pointer; }

.btn  a{   border: none;  display:inline-block;  float:left; outline: none;   padding: 12px 16px; background-color: #014b88; color:#ffffff;   cursor: pointer; }
.show {   display: block; }



.circle {   display: inline-block;  margin: auto; } .square {   display: inline-block; } /*// General styles */ .gelatine {   animation: gelatine 5.5s ;  margin: auto; } @keyframes gelatine {   from, to { transform: scale(1, 1); }   25% { transform: scale(0.9, 1.1); }   50% { transform: scale(1.1, 0.9); }   75% { transform: scale(0.95, 1.05); } } .pulse {   animation: pulse 1s infinite ease-in-out alternate; } @keyframes pulse {   from { transform: scale(0.8); }   to { transform: scale(1.2); } } .flash {   animation: flash 500ms ease infinite alternate; } @keyframes flash { 	from { opacity: 1; }	 	to { opacity: 0; } } .hithere {   animation: hithere 1s ease infinite; } @keyframes hithere {   30% { transform: scale(1.2); }   40%, 60% { transform: rotate(-20deg) scale(1.2); }   50% { transform: rotate(20deg) scale(1.2); }   70% { transform: rotate(0deg) scale(1.2); }   100% { transform: scale(1); } } .grow {   animation: grow 2s ease infinite; } @keyframes grow {   from { transform: scale(0); }   to { transform: scale(1); } } .fade-in {   animation: fade-in 2s linear infinite; } @keyframes fade-in {   from { opacity: 0; }   to { opacity: 1; } } .fade-out {   animation: fade-out 2s linear infinite; } @keyframes fade-out {   from { opacity: 1; }   to { opacity: 0; } } .bounce {   animation: bounce 10s ease ; } @keyframes bounce {     70% { transform:translateY(0%); }     80% { transform:translateY(-15%); }     90% { transform:translateY(0%); }     95% { transform:translateY(-7%); }     97% { transform:translateY(0%); }     99% { transform:translateY(-3%); }     100% { transform:translateY(0); } } .bounce2 {   animation: bounce2 2s ease infinite; } @keyframes bounce2 { 	0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 	40% {transform: translateY(-30px);} 	60% {transform: translateY(-15px);} } .shake {   animation: shake 2s ease infinite; } @keyframes shake { 	0%, 100% {transform: translateX(0);} 	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 	20%, 40%, 60%, 80% {transform: translateX(10px);} } .flip { 	backface-visibility: visible !important; 	animation: flip 2s ease infinite; } @keyframes flip { 	0% { 		transform: perspective(400px) rotateY(0); 		animation-timing-function: ease-out; 	} 	40% { 		transform: perspective(400px) translateZ(150px) rotateY(170deg); 		animation-timing-function: ease-out; 	} 	50% { 		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 		animation-timing-function: ease-in; 	} 	80% { 		transform: perspective(400px) rotateY(360deg) scale(.95); 		animation-timing-function: ease-in; 	} 	100% { 		transform: perspective(400px) scale(1); 		animation-timing-function: ease-in; 	} } .swing { 	transform-origin: top center; 	animation: swing 2s ease infinite; } @keyframes swing { 	20% { transform: rotate(15deg); }	 	40% { transform: rotate(-10deg); } 	60% { transform: rotate(5deg); }	 	80% { transform: rotate(-5deg); }	 	100% { transform: rotate(0deg); } } .wobble {   animation: wobble 2s ease infinite; } @keyframes wobble {   0% { transform: translateX(0%); }   15% { transform: translateX(-25%) rotate(-5deg); }   30% { transform: translateX(20%) rotate(3deg); }   45% { transform: translateX(-15%) rotate(-3deg); }   60% { transform: translateX(10%) rotate(2deg); }   75% { transform: translateX(-5%) rotate(-1deg); }   100% { transform: translateX(0%); } } .fade-in-down {   animation: fade-in-down 2s ease infinite; } @keyframes fade-in-down {   0% {     opacity: 0;     transform: translateY(-20px);   }   100% {     opacity: 1;     transform: translateY(0);   } } .fade-in-left {   animation: fade-in-left 2s ease infinite; } @keyframes fade-in-left {   0% {     opacity: 0;     transform: translateX(-20px);   }   100% {     opacity: 1;     transform: translateX(0);   } } .fade-out-down {   animation: fade-out-down 2s ease infinite; } @keyframes fade-out-down {   0% {     opacity: 1;     transform: translateY(0);   }   100% {     opacity: 0;     transform: translateY(20px);   } } .fade-out-right {   animation: fade-out-right 2s ease 1; } @keyframes fade-out-right {   0% {     opacity: 1;     transform: translateX(0);   }   100% {     opacity: 0;     transform: translateX(20px);   } } .bounce-in {   animation: bounce-in 10s ease 1; } @keyframes bounce-in {   0% {     opacity: 0;     transform: scale(.3);   }   50% {     opacity: 1;     transform: scale(1.05);   }   70% { transform: scale(.9); }   100% { transform: scale(1); } } .bounce-in-right {   animation: bounce-in-right 2s ease 1; } @keyframes bounce-in-right {   0% {     opacity: 0;     transform: translateX(2000px);   }   60% {     opacity: 1;     transform: translateX(-30px);   }   80% { transform: translateX(10px); }   100% { transform: translateX(0); } } .bounce-out {   animation: bounce-out 2s ease infinite; } @keyframes bounce-out {   0% { transform: scale(1); }   25% { transform: scale(.95); }   50% {     opacity: 1;     transform: scale(1.1);   }   100% {     opacity: 0;     transform: scale(.3);   } } .bounce-out-down {   animation: bounce-out-down 2s ease infinite; } @keyframes bounce-out-down {   0% { transform: translateY(0); }   20% {     opacity: 1;     transform: translateY(-20px);   }   100% {     opacity: 0;     transform: translateY(20px);   } } .rotate-in-down-left {   animation: rotate-in-down-left 2s ease infinite; } @keyframes rotate-in-down-left {   0% {     transform-origin: left bottom;     transform: rotate(-90deg);     opacity: 0;   }   100% {     transform-origin: left bottom;     transform: rotate(0);     opacity: 1;   } } .rotate-in-up-left {   animation: rotate-in-up-left 2s ease infinite; } @keyframes rotate-in-up-left {   0% {     transform-origin: left bottom;     transform: rotate(90deg);     opacity: 0;   }   100% {     transform-origin: left bottom;     transform: rotate(0);     opacity: 1;   } } .hinge {   animation: hinge 2s ease infinite; } @keyframes hinge {   0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }    20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }    40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }   80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }   100% { transform: translateY(700px); opacity: 0; } } .roll-in {   animation: roll-in 2s ease infinite; } @keyframes roll-in {   0% {     opacity: 0;     transform: translateX(-100%) rotate(-120deg);   }   100% {     opacity: 1;     transform: translateX(0px) rotate(0deg);   } } .roll-out {   animation: roll-out 2s ease infinite; } @keyframes roll-out {     0% {     opacity: 1;     transform: translateX(0px) rotate(0deg);   }   100% {     opacity: 0;     transform: translateX(100%) rotate(120deg);   } } 


@media screen and (max-width: 600px) {
  .column   {     width: 100%;     height: auto;   }
  .column2   {     width: 100%;     height: auto;   }
  .overlayb {     width: 100%;     height: auto;   }
  .column3   {     min-width: 73vw;     height: auto;   }
.art_thumbnail
 {     min-width: 100vw;     height: auto;   }
th, tr, td, table   {     min-width: 100%;     height: auto;   }
td {     display: block;     min-width: 100%; }
.gallery  {     width: 100%;     height: auto;   }
.gallery  {     width: 100%;     height: auto;   }
.profile-name {     display:none;   }
.story__content {   position: relative;   transform: translate3d(100%, 0, 0);   padding: 1em;   text-align: center; background-image: none; background-color:#ffffff; }
}

body  {font-family: 'Advent Pro', sans-serif;  overflow-x: hidden; margin:0px; }
h1  {font-family: 'Advent Pro', sans-serif; }
h2, h3, h4, h5, h6 {font-family:'Patrick Hand', sans-serif; 	line-height: 1; 	margin: 1rem; 	font-weight: 500; }

.button {   border: none;   color: white;   padding: 15px 32px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 26px;   margin: 4px 2px;   cursor: pointer; background-color: #008CBA; }
.button2 {   border: none;   color: #008CBA;   padding: 5px 10px;   text-align: center;   text-decoration: none;   display: inline-block;   font-size: 16px;   margin: 4px 2px;   cursor: pointer; background-color: #ffffff;  border-radius: 25px; }
/* width */
::-webkit-scrollbar {   width: 20px; }

/* Track */
::-webkit-scrollbar-track {   box-shadow: inset 0 0 5px grey;   border-radius: 10px; }
 
/* Handle */
::-webkit-scrollbar-thumb {   background:  #003366;   border-radius: 10px; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {   background: blue; }


a{  color:#337ab7; text-decoration:none; }

.block-menu {  clear: right;  padding-left: 15%; margin-top:0%;}
.block-menu ul{	margin:0;	padding:0;	}
.block-menu ul li{	display:inline-block;	}
.block-menu ul li a {  float: left;   font-weight: bold;  line-height: 3.0;  padding: 0 17px;  position: relative;  vertical-align: middle;  white-space: nowrap;  color:#4b4f56;  text-transform:capitalize;}


.tab {   overflow: hidden;   border: 1px solid #ccc;   background-color: #f1f1f1; }
.tab button {   background-color: inherit;   float: left;   border: none;   outline: none;   cursor: pointer;   padding: 14px 16px;   transition: 0.3s; }
.tab button:hover {   background-color: #ddd; }
.tab button.active {   background-color: #ccc; }
.tabcontent {   display: none;   padding: 6px 12px;   border: 1px solid #ccc;   border-top: none; }


@media screen and (max-width: 992px) { }
@media screen and (max-width: 760px) {   }
@media screen and (max-width: 600px) {   input.searchfield[type=text] { display: none !important;height: 0; } .searchbutton { display: none !important;height: 0; } }

@media screen and (max-width: 465px) {
body { max-width:100vw;}
th,td,tr, table { min-width:90vw; display:block; clear:both;}

input.searchfield[type=text] { display: none !important;height: 0; } .searchbutton { display: none !important;height: 0; } }


.tooltip {  position: relative;  display: inline-block;}

/* Tooltip text */
.tooltip .tooltiptext {  visibility: hidden;  width: 120px;  background-color: #cccccc;  color: #003366;  text-align: center;padding: 5px 0;  border-radius: 6px;  font-size:50%;
  position: absolute;  z-index: 100;}
.tooltip:hover .tooltiptext {  visibility: visible;}
.tooltip .tooltiptext {font-size:120%;  width: 120px;  top: 100%;  left: 50%;  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */}
.card {  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);  transition: 0.3s;  width: 40%;float:left;min-height:500px;}
.card:hover {  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.container {clear:both;}
.fa {font-size:150%}
.fas {font-size:150%}

@media print {  .pasimpression{      display: none !important;        height: 0;    }  #pasimpression{        display: none !important;        height: 0;    } }




.searchbutton {   background-color:#003366; color:#ffffff;}
.button  {   background-color:#003366; color:#ffffff;   padding:15px;   display:inline-block;   float:right;   border-radius:20px;   color:white;    margin:5px;   max-width:350px;}
.btn btn-lg  {   background-color:#003366; color:#ffffff;   padding:15px;   display:inline-block;   float:right;   border-radius:20px;   color:white;   margin:5px;   max-width:350px;}
.ancre {	width: 60px;	height: 60px;	position: absolute;	left:45%; bottom:10px; z-index:100; opacity:0.6; animation: down 18.5s infinite;	-webkit-animation: down 18.5s infinite;}

@keyframes down {     0%   {margin-bottom: -5%;}   50% {margin-bottom: 2%; transform: rotate(-15deg); }   100%   {margin-bottom: -5%;} }

@-webkit-keyframes down {   0%   {margin-bottom: -5%;}   50% {margin-bottom: 2%; transform: rotate(-15deg); }   100%   {margin-bottom: -5%;} }

.img-comp-container {   position: relative;   height: 200px; /*should be the same height as the images*/ }

.img-comp-img {   position: absolute;   width: auto;   height: auto;   overflow:hidden; }

.img-comp-img img {   display:block;   vertical-align:middle; }

.img-comp-slider {   position: absolute;   z-index:9;   cursor: ew-resize;   /*set the appearance of the slider:*/   width: 40px;   height: 40px;   background-color: #2196F3;   opacity: 0.7;   border-radius: 50%; }


 @keyframes eau1 {   0%   {margin-top: 12%;}   50% {margin-top: 13%; height:80vh;}   100%   {margin-top: 12%;} }
 @keyframes eau2 {   0%   {margin-top: 12%;}   50% {margin-top: 14%; height:80vh;}   100%   {margin-top: 12%;} }

 @keyframes flotte {   0%   {margin-top: 0%;}   50% {margin-top: 2%; transform: rotate(5deg); }   100%   {margin-top: 0%;} }

 @keyframes ciel {   0%   {margin-left: -15%;}   100% {margin-left: 100%;  width:5%; transform: rotate(-5deg);opacity: 0.5;} }
.cigogneciel  {  	overflow: hidden; 	animation-name: ciel; animation-duration: 45s;  animation-iteration-count: infinite;    position: absolute;      margin-top: 10%;      margin-left: -15%;	  width:25%; height:auto;	  z-index:1;  }

	
.eau-avant    {  	overflow: hidden; 	animation-name: eau1;  animation-duration: 4s;   animation-iteration-count: infinite;  animation-direction: alternate;     position:absolute;     top: 10%;     left: 0;	  width:100%; height:85vh;	  z-index:10;    }
	
.sos    {  	overflow: hidden;   animation-duration: 4s;   animation-iteration-count: infinite;  animation-direction: alternate;      position: absolute;      margin-top: 10%;     left: 0;	  width:100%; height:auto;	  z-index:10;   }

.antoninflotte    {  	overflow: hidden; 	animation-name: flotte;  animation-duration: 6s;   animation-iteration-count: infinite; animation-direction: alternate;      position: absolute;     left: 32%;	  max-width:53%; max-height:85vh; top:10vh;	  z-index:10;    }

.eau-avant2  {    -webkit-transform: scaleX(-1); transform: scaleX(-1);	 overflow: hidden; 	animation-name: eau2; animation-duration: 6s;   animation-iteration-count: infinite; animation-direction: alternate;     position: absolute;     top: 15%;     left: 0;	  width:100%; height:85vh;  z-index:10;  }

.nuage   {    overflow: hidden; 	animation-name: nuage;  animation-duration: 6s;   animation-iteration-count: infinite;  animation-direction: alternate;     position: absolute;     margin-top: 0%;	  top:0px;    left: 0;	  width:100%; 	  z-index:-1;   }
	
.overlay {background: linear-gradient(0deg, rgba(0,45,85,1) 0%, rgba(0,109,171,1) 45%, rgba(12,141,177,1) 60%, rgba(130,158,170,1) 80%, rgba(98,168,195,1) 100%);  height:100vh; width: 0;  position: fixed;  z-index: 100; top: 0;  left: 0; overflow-x: hidden; transition: 0.5s;}
.overlay2 { height: 100%;  width: 0;  position: fixed;  z-index: 110; top: 0;  left: 0;   overflow-x: hidden; transition: 0.5s; background-color: rgba(255, 255, 255, 1); }
.overlay3 { height: 450px;  width: 0; text-align:center; position: absolute;  z-index: 110; top: 100px;  right: 10px;   overflow-x: hidden; transition: 0.5s; background-color: rgba(255, 255, 255, 1); }
.overlay-content { color: #666666;   position: relative; top: 0%;    text-align: center;  }
.overlay-content2 {  position: relative; top: 5%;    text-align: justify; padding: 5%; }
.overlay-content3 {  position: relative; top: 5%;    text-align: justify; padding: 5%; }
.overlay a {  text-decoration: none;    color: #ffffff;  transition: 0.3s;}
.overlay2 a { 	font-weight: bold; text-decoration: none;    color: #003366;   transition: 0.3s;}
.overlay3 a { 	font-weight: bold; text-decoration: none;    color: #003366;   transition: 0.3s;}
.overlay a:hover, .overlay a:focus {   color: #f1f1f1;}
.overlay2 a:hover, .overlay a:focus {  color: #000000;}
.overlay3 a:hover, .overlay a:focus {  color: #000000;}
.overlay .closebtn {  position: absolute;  display:block;    z-index:200;right: 5%; top:5%;  font-size: 60px;}
.overlay2 .closebtn {  position: absolute;  display:block;  z-index:200; right: 5%; top:1%;   font-size: 60px; }
.overlay3 .closebtn {  position: absolute;  display:block;  z-index:200; right: 5%; top:1%;   font-size: 60px; }
.overlay a {font-size: 20px}  
.overlay .closebtn {  font-size: 40px; right: 5%; top:5%;  z-index:200;  }
.overlay2 .closebtn {  font-size: 40px; right: 5%; top:10%;   z-index:200;  }
.overlay3 .closebtn {  font-size: 40px; right: 5%; top:10%;   z-index:200;  }



.clear{   float:none;   clear:both; }


@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {     .intro {                                   height: 1024px;                             }                       }   
                                            
/* iPad with landscape orientation. */                       
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {                             .intro {                                   height: 768px;                             }                       }
                                               
/* iPhone 5 You can also target devices with aspect ratio. */                       
@media screen and (device-aspect-ratio: 40/71) {                                  .intro {                                   height: 500px;                             }                       }




/* ---------- Header ---------- */
.img-comp-container {   position: relative;   height: 200px; /*should be the same height as the images*/ }

.img-comp-img {   position: absolute;   width: auto;   height: auto;   overflow: hidden; }

.img-comp-img img {   display: block;   vertical-align: middle; }

.img-comp-slider {   position: absolute;   z-index: 9;   cursor: ew-resize;   /*set the appearance of the slider:*/   width: 40px;   height: 40px;   background-color: #2196F3;   opacity: 0.7;   border-radius: 50%; }

.heading-small { 	font-size: 2rem; }
.header { 	background-color: #fff; 	border-bottom: 1px solid #ddd; 	padding-top: var(--header-padding-top); 	height: var(--header-height); 	z-index: 2; }
.header a { 	color: #222; }
.header a:hover { 	text-decoration: none; }
.logo { 	background: url("../img/pluxml-logo-black.png") top left no-repeat; 	height: calc(var(--header-height) + var(--bg-height) - var(--header-padding-top)); 	background-size: 6rem; 	background-position: 5rem 0; 	padding-left: 12rem; 	margin-left: -5rem; }
.bg { 	background: url(../img/bg.jpg) no-repeat top left; 	-webkit-background-size: cover; 	-moz-background-size: cover; 	-o-background-size: cover; 	background-size: cover; 	height: var(--bg-height); }
.nav { 	text-align: right; 	padding-top: 0; }

ul.menu {}

.menu>li { 	font-size: 1.5rem; 	margin-left: .5rem; }

.menu a { 	border-bottom: 3px solid transparent; }
.menu a:hover { 	border-bottom: 3px solid #222; }
.menu>li>span { 	cursor: default; }
.menu>li ul {/* sub menu */ 	position: absolute; 	padding: 0; 	line-height: 2.8rem; 	z-index: 10; }
.menu > li:last-of-type ul { 	right: 0; }
.menu>li:not(:hover) ul {/* hide sub menu */ 	display: none; }
.menu ul li { 	display: block; 	margin: 0; 	padding: 0 1rem; 	background-color: #fff; 	text-align: left; }
.menu .sub-menu { 	overflow-y: auto; }
.menu .sub-menu li { 	padding: 0 0.35rem; }
.menu .sub-menu li:last-of-type { 	padding-bottom: 0.35rem; }

.menu>li span::before {/* / menu */ 	content: '25bc'; 	padding-right: 0.5rem; }
ul.menu .noactive:hover,
ul.menu .active span,
ul.menu span.active,
ul.menu li.active a,
ul.menu a.active,
ul.menu li span:hover,
ul.menu li a:hover {/* pluCss1.3.1 fix : plxMyshop 0.13.x, maybe more */ 	color: #000 !important; 	text-decoration: none; }

ul.menu li span,
ul.menu li a {/* pluCss1.3.1 fix : plxMyshop 0.13.x, maybe more */ 	display: inline-block; 	padding-left: .35rem; 	padding-right: .35rem; 	width: 100%; /*	cursor: pointer;*/ 	background-color: rgba(255,255,255,.55); 	border-radius: 1px; 	color: #258fd6; 	white-space: nowrap; }
ul.menu li span a,
ul.menu li a span {/* pluCss1.3.1 fix : plxMyshop 0.13.x, maybe more */ 	white-space: nowrap; 	display: inline; 	margin-right: -.35rem; 	padding-left: 0; }
ul.menu li.noactive a,
ul.menu a.noactive{ /*	background-color: rgba(255,255,255,.55);*/ 	border-radius: 1px; 	color: #258fd6; }

.cat-list .active, .classified-in .active { 	background-color: #6aa6ce; 	color: #fff; }


/* ---------- Main ---------- */

.main { 	background-color: #fff; 	padding-top: 2rem; } .repertory { 	margin-top: 4rem; }


/* ------- Pagination ------- */

.pagination { 	margin: 3rem 0 3rem 0; } .pagination a { 	background-color: #258fd6; 	border-radius: .3rem; 	color: #fff; 	padding: .9rem .7rem; 	transition-duration: .2s; } .pagination a:hover { 	background-color: #3a6c96; 	color: #fff; 	text-decoration: none; } .pagination span:first-letter, .pagination a:first-letter { 	text-transform: uppercase; } .p_first, .p_prev, .p_current, .p_next, .p_last { 	display: inline-block; }


/* ------- Article ------- */
.article{ font-size:125%;    letter-spacing: 0.2em; } article:after { 	display:block; 	content: ""; 	 } .article header { 	margin-top: 2rem; } .article header div { 	margin: 0; } .article header h2, .article header h2 a { 	color: #222; 	font-size: 3.2rem; 	line-height: 1.2em; 	letter-spacing: -1px; 	font-weight: bold; 	margin: 0; } .article header h2 a:hover { 	color: #111; 	text-decoration: none; } .article header small, .comment small { 	color: #9EABB3; } .article header span:before, .article header time:before, .article footer span:before { 	padding-left: 1.5rem; 	padding-right: .3rem; } .article .art-date { 	font-size: 1.5rem; 	color: #9EABB3; } .article .written-by:after { 	content: '|'; 	padding-left: 0; } .article .classified-in:after { 	content: '|'; 	padding-left: 0; } .art_thumbnail { 	padding: 30px 15px 15px 0; 	float: left; width:50%; } .page.mode-article .article footer { 	border-top: 1px solid #dedede; 	border-bottom: 1px solid #dedede; }

/* ------- Comments ------- */

#form { 	border-top: 130px solid transparent; 	margin: -130px 0 0; } .comment { 	background-image: url('../img/user.png'); 	background-repeat: no-repeat; 	margin-bottom: 2.5rem; 	padding-left: 6rem; 	border-top: 100px solid transparent; 	margin-top: -100px; } .comment blockquote { 	margin: 0; 	font-size: 1.3rem; } .type-admin { 	background-color: #F0F8FF; 	padding: .2rem .5rem; } .nbcom { 	background-color: #258fd6; 	border-radius: .3rem; 	color: #fff; 	padding: .4rem .6rem; } .nbcom:hover { 	background-color: #3a6c96; 	color: #fff; 	text-decoration: none; } .level-0 { 	margin-left: 0; } .level-1 { 	margin-left: 5rem; } .level-2 { 	margin-left: 10rem } .level-3 { 	margin-left: 15rem; } .level-4 { 	margin-left: 20rem; } .level-5, .level-max { 	margin-left: 25rem; } #id_answer { 	margin-bottom: 1.5rem; 	padding: 1.5rem; 	border: 1px solid #eee; 	width: 100%; 	background: #fafafa; 	display: none; } .capcha-letter, .capcha-word { 	font-weight: bold; } .capcha-word { 	background-color: #ddd; 	border-radius: .3rem; 	letter-spacing: .5rem; 	padding: .9rem .7rem; 	transition-duration: .2s; } .capcha-word:hover { 	background-color: #666; 	color: #fff; 	transition-duration: .2s; }

/* ------- Sidebar ------- */

.aside { 	padding: 0 2rem 0 2rem; } .aside h3 { 	font-size: 1.5rem; 	font-weight: bold; 	margin-top: 5rem; 	text-transform: uppercase; } .aside ul { 	margin: 0; }


/* --------- tags ---------- */

.aside ul.tag-list { 	list-style-type: none; 	padding: 0; } .aside ul.tag-list li { 	display: inline-block; } .aside ul.tag-list li a { 	padding: 0 0.5rem 0 0; } .aside ul.tag-list li a.active { 	font-weight: bold; 	background-color: #68838b; 	color: #fff; 	padding: 0 0.5rem 0 0.5rem; }

.tag-size-1 a { 	font-size: 1.0rem; 	/* Riverside  */ 	color: #4C6A92; } .tag-size-2 a { 	font-size: 1.2rem; 	/* Airy Blue  */ 	color: #92B6D5; } .tag-size-3 a { 	font-size: 1.4rem; 	/* Sharkskin  */ 	color: #838487; } .tag-size-4 a { 	font-size: 1.6rem; 	/* Bodacious */ 	color: #B76BA3; } .tag-size-5 a { 	color: #AF9483; 	/* Warm Taupe */ 	font-size: 1.8rem; } .tag-size-6 a { 	color: #AD5D5D; 	/* Dusty Cedar */ 	font-size: 2.0rem; } .tag-size-7 a { 	font-size: 2.2rem; 	/* Lush Meadow */ 	color: #006E51; } .tag-size-8 a { 	font-size: 2.4rem; 	/* Spicy Mustard */ 	color: #D8AE47; } .tag-size-9 a { 	font-size: 2.6rem; 	/* Potter's Clay */ 	color: #9E4624; } .tag-size-10 a { 	font-size: 2.8rem; 	/* Aurora Red */ 	color: #B93A32; } .tag-size-11 a { 	font-size: 3.0rem; 	/* Snorkel Blue */ 	color: #034F84; }

/* ---------- Footer ---------- */

.footer { 	color: #FFFFFF; 	padding: 6rem 0; 	text-align: center; 	font-size: 1.2rem; position:absolute; top:20vh; width:100%; }

.footer p { 	margin: 0; }

.footer a:hover { 	text-decoration: none; }

@media (min-width: 128rem) { 	.container { 		padding-left: 15rem; 		padding-right: 15rem; 	} 	.logo { 		background: url("../img/pluxml-logo-black.png") top left no-repeat; 		height: 12rem; 		background-size: 12rem; 		background-position: 6rem 0; 		padding-left: 18rem; 		margin-left: -12rem; 	} 	.heading-small { 		font-size: 3rem; 	} }

@media (min-width: 64rem) { 	.container { 		padding-left: 5rem; 		padding-right: 5rem; 	} 	.heading-small { 		font-size: 2.5rem; 	} }

@media (max-width: 767px) { 	h1 * { 		font-size: 1.23rem; 	} 	h2 { 		font-size: 1rem; 	} 	h3{ 		font-size: 0.9rem; 	} 	.header { 		position: sticky; 		top: 0; 	} 	.header:hover .grid { 	overflow: unset 	} 	.header div.grid{ 		overflow: unset;/* fix hidden sub-menu */ 	} 	.logo { 		background-size: 5rem; 		background-position: 2.5rem 0; 		padding-left: 8rem; 		margin-left: -1rem; 	} 	.heading-small { 		line-height: .5; 		margin-bottom: .5rem 	} 	.header a:hover { 		color: #eee; 	} 	h1 { 		font-size: 1.61rem; 	} 	h2 { 		font-size: 1.23rem; padding-top:50px; 	} h3 { 		font-size: 0.9rem; 	} .mobile { 	min-width:100%; 	} 	.header, 	.footer { 		padding: 1rem 0; 	} 	.aside { 		padding-left: 1.5rem; 	} 	

.nav { 		position: sticky; 		top: 0; 		z-index: 100; 	height: auto; 		max-height: 80%; 		overflow-y: auto; 		text-align: left; 		margin-top: 0; 			border-radius: 1rem; 			} 	.nav>.container { 		padding: 0; 	} 	
ul.menu { 		padding: 0 15px 7.5px 15px; 	} 	.menu li { 		background: #efefef; 	} 	.menu li:hover {} 	.menu>li span::before {/* sub menu icon */ 		margin-left: -1.5rem; 	} 		.menu>li ul { 		position: relative !important; 		border-bottom: 0px solid transparent; 	} 	.menu>li ul li:hover { 		background-color: #fff; 	} 	.menu>li ul li:hover a { /*		text-decoration: underline; */ 	} 	 ul.menu li.active a, 	 ul.menu li.active:hover, 	 ul.menu li, 	 ul.menu li:hover { 		background-color: #fff; /*		color: #000;*/ 	} 	.comment { 		background-image: none; 		padding-left: 0; 	} 	.level-1 { 		margin-left: 1rem; 	} 	.level-2 { 		margin-left: 2rem; 	} 	.level-3 { 		margin-left: 3rem; 	} 	.level-4 { 		margin-left: 4rem; 	} 	.level-5, 	.level-max { 		margin-left: 5rem; 	} }

@media (max-width: 463px) { 	
.antoninflotte    {  	 height:50vh;	top:25vh;      } 
.eau-avant    {   top: 30vh;   }
.eau-avant2    {   top: 35vh;   }
.header { 		height: 7rem; 	}  	.logo { 		background-position: 1rem 0; 		padding-left: 2rem; 		background-size: 4rem; 		padding-left: 6rem; 		margin-left: -1rem; 		height: 5rem; 	} 	.heading-small { 		font-size: 3rem; 	} 	.nav { 		padding-top: 0rem; 	} 	ul.menu { 		margin: 0 2px .5px 2px; 		border-radius: 15px; 	} 	.header h1 * { 		font-size: 1.23rem; 	} 	.header h2 { 		font-size: 1rem; 	} 	.bg { 		height: 100px; 	} 	.static.group, 	.static.menu a { 		padding: 0; 	} }
@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {display: none;}
  .nav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .nav.responsive {position: relative;}
  .nav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
@media print { 	body, .logo{ 		padding: 0; 		margin: 0; 	} 	.bg{ 		height: 2.22rem; 		background: #fff; 	} 	nav, .nav { 		 display:none; 	} 	.header{ 		display:none; 	} 	  .pasimpression{        display:none;    } 	  #pasimpression{        display:none;    } }