html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html { line-height: 1; }

ol, ul { list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote { quotes: none; }

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}














a:link , a:focus , a:visited , a:active { color:white;}


a.hover_fx:hover{
 color:green;
}



a.actu_link{
 color:black;
}

a.actu_link:visited{
 color:black;
}
a.actu_link:active{
 color:black;
}











a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }














/*-------------------------
  CSS Chapters:
  0 - Variables
  1 - General formatting
  2 - Header
  3 - Sidebar
  4 - Main Content
  5 - Main Site Footer
  6 - Media Queries
-------------------------*/
/*-------------------------
  0 - Variables
-------------------------*/
/*-------------------------
  1 - General formatting
-------------------------*/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body, html { height: 100%; }

strong {
  font-weight: 400;
  display: inline-block;
  background-color: #FFD480;
  padding: 0 8px;
}

body {color:white; 
      background-color:#fff;
}
 
  


body.nav-open section { margin-left: 0; }

body.nav-open aside { left: 0; }

body, h1, h2, h3, p, h4 { font-family: 'Oswald', sans-serif;}

h2 { margin-bottom: 15px; }

.right { float: right; }

.left { float: left; }

.controls {
  position: relative;
  margin-bottom: 15px;
}

a { text-decoration: none; }

.sep {
  content: '';
  border-right: 1px solid rgba(0, 0, 0, 0.13);
}

/*-------------------------
  2 - Header
-------------------------*/



header{position:fixed;width:100%;z-index:999;
  height:125px;background-color:#61c904;border-bottom:5px solid green;
}

nav{padding:15px 30px;float:left;font-size:20px;

}




nav.res {
   padding:0;
    float: left;
    font-size: 20px;
}




.logo_site{ font-size:50px;
            z-index:9;
margin-top:-3px;
float:left;
}


.logo_site img, span{
  vertical-align : middle;
}




.social_bar{
    float: right;
    margin-right: 10px;
    padding:37px;
}










a.tooltips_cls {
  position: relative;
  display: inline;
  color: #000000;
  text-decoration: none;
}

a.tooltips_cls span {
  position: absolute;margin-top:-8px;
  width: 94px;
  color: white;
  background: white;
  height: 27px;
  line-height: 27px;
  text-align: center;
  visibility: hidden;
  border-radius: 4px;
  color: black;
  font-size:12px;
}
a.tooltips_cls span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
 
}
a:hover.tooltips_cls span {
  visibility: visible;
  opacity: 0.8;
  top: 30px;
  left: 100%;
  margin-left:-76px;
  z-index: 999;
}





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

aside {
    border-right:8px solid green;
  position: fixed;
  height: 100%;
  width: 100%;
  color: #fff;
  left: -100%;
  background: #61c904;
  padding: 20px;
  -moz-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
  -o-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
  -webkit-transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
  transition: left 0.4s ease, width 0.5s cubic-bezier(0.525, -0.35, 0.115, 1.335);
}

aside a {
  padding: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  -moz-transition: background-color 0.3s, color 0.3s;
  -o-transition: background-color 0.3s, color 0.3s;
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
}

aside a:hover { color: #fff; }

aside a i, aside a img {
  width: 20px;
  text-align: center;
  margin-right: 6px;
}

aside a, aside input[type="search"] {
  color: #fff;
  display: block;
   text-transform:uppercase; 
  font-weight: 400;
  font-size:24px;
  width: 100%;
  padding: 8px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

aside input[type="search"] {
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #344454;
  width: 100%;
  font-size: 14px;
  padding: 8px;
  padding-left: 25px;
  -moz-transition: background-color 0.3s, border 0.3s;
  -o-transition: background-color 0.3s, border 0.3s;
  -webkit-transition: background-color 0.3s, border 0.3s;
  transition: background-color 0.3s, border 0.3s;
}

aside input[type="search"]:hover, aside input[type="search"]:focus {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #3a4b5d;
}

aside input[type="search"] + label {
  position: absolute;
  left: 10px;
  top: 8px;
  color: rgba(0, 0, 0, 0.5);
}

aside .site-nav  a { margin-bottom: 3px; }

aside .site-nav a.active, aside .site-nav a:hover { background-color: rgba(0, 0, 0, 0.3); }

aside .site-nav a.active i { color: #24FFCE; }








aside footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  width: 100%;
  position: absolute;
  bottom: 40px;
  left: 0;
  padding-left: 10px;
}

aside footer a { padding: 8px; }

aside footer .avatar img {
  max-width: 20px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 10px;
}

/*-------------------------
  4 - Main Content
-------------------------*/

section {background-color:#444; 
  -moz-transition: margin-left 0.4s ease;
  -o-transition: margin-left 0.4s ease;
  -webkit-transition: margin-left 0.4s ease;
  transition: margin-left 0.4s ease;
}






section article { 
    padding: 20px; }

section article h2 {
  font-weight: 300;
  font-size: 24px;
}

section article p {
  line-height: 1.5;
  margin-bottom: 10px;
}


mark{ background:green;
color:black; 
}

mark:hover{ background-color: red;
  color: red; -webkit-transition: color 0.3s 1s ease-out;
    -moz-transition: color 0.3s 1s ease-out;
    -ms-transition: color 0.3s 1s ease-out;
    -o-transition: color 0.3s 1s ease-out;
    transition: color 0.3s 1s ease-out;}


.photo_post {
  padding:10px 10px 10px 10px;
  text-align:center;
  
}



.square {
    float:left;
    position: relative;
    width: 49.6%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:0.155%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
}

.img_1-1{background-image:url(images/cover.png);}
.img_1-1:hover{background-image:url(images/cover_opa.png);}

.img_1-2{background-image:url('images/leds.png');}
.img_1-2:hover{background-image:url(images/leds_opa.png);}

.img_1-3{background-image:url(images/calico.png);}
.img_1-3:hover{background-image:url(images/calico_opa.png);}

.img_2-1{background-image:url(images/faunus.png);}
.img_2-1:hover{background-image:url(images/faunus_opa.png);}

.img_2-2{background-image:url(images/multi.png);}
.img_2-2:hover{background-image:url(images/multi_opa.png);}







.content_art {line-height:1.3;
    font-size:36px;
    position:absolute;
    height:80%;/* = 100% - 2*10% padding */
    width:90%;/* = 100% - 2*5% padding */
    padding: 11% 5%;
}


.content_art_change_position {line-height:1.3;
    font-size:36px;
    position:absolute;
    height:80%;/* = 100% - 2*10% padding */
    width:90%;/* = 100% - 2*5% padding */
    padding: 5% 5%;
}

.content_art_change_position_2 {line-height:1.3;
    font-size:36px;
    position:absolute;
    height:80%;/* = 100% - 2*10% padding */
    width:90%;/* = 100% - 2*5% padding */
    padding: 60% 5%;
}

.content_art_change_position_3 {line-height:1.3;
    font-size:36px;
    position:absolute;
    height:80%;/* = 100% - 2*10% padding */
    width:90%;/* = 100% - 2*5% padding */
    padding: 3% 5%;
}









section.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}







/*-------------------------
  5 - Main Site Footer
-------------------------*/

.site-footer {
  background: #f7846a;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background-color: #fafafa;
  border-top: 1px solid #ddd;
  font-size: 12px;
}

.site-footer a {
  color: #2A3744;
  display: inline-block;
  margin-right: -4px;
  padding: 0 8px;
}

.site-footer a.feedback { color: #FF870E; }

/*-------------------------
  6 - Media Queries
-------------------------*/
@media (min-width: 500px) {

body.nav-open section { margin-left: 250px; }

aside {
  position: fixed;
  top: 0;
  padding-top: 80px;
  width: 250px;
}

.site-footer {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
}
}



/*-------------------------
  7 - Actualité
-------------------------*/


.bar_top{z-index:8;
    position:fixed;
  background-color:green;
  width:100%;
}

h4{color:yellow;
   margin-left:55px;
    font-size:36px;
    text-transform: uppercase;
    padding:10px;
    
    }
    
    
    .colonne_left{margin-top:125px;
                  float:left;
                  position:fixed;
                  width:240px;
                  background-color:#e4e4e4;
                  text-transform: uppercase;
                  overflow:scroll;
                  height:calc(100% - 120px);
                  display:block;
    
    }
    
    h5 { 
        text-align:center;
        padding:10px;
    color:red;}
    
    
    p{ padding:10px;color:black;
      font-size:16px;
      text-transform:lowercase;
     
     }
     
     
     .post_scroll{ overflow-y: scroll;
  max-height: 500px;}
     
     
     
     
     
     
     
     .text_art_main{
         font-size:24px;font-weight:300;line-height:1.4em;text-transform:inherit;
         padding-bottom:52px;
     }
     
     
     
     
     
    
     .post{
         
     }
     
     
     .date_art{ font-size:12px;color:black;padding:0px 25px;  }
     
     hr{ width:200px; }
     
     .img_1-1_min{;background-image:url(images/cover.png);
     margin-right:6px;
     }
     
    .img_1-2_min{;background-image:url(images/leds.png);
     margin-right:6px;
     }
     .img_1-3_min{;background-image:url(images/calico.png);
     margin-right:6px;
     }
      
     .img_2-1_min{;background-image:url(images/faunus.png);
     margin-right:6px;
     }
     .img_2-2_min{;background-image:url(images/multi.png);
     margin-right:6px;
     }
     
     
     
     
    
     .colonne_middle{padding-left:267px;
                    background-color:white;
                    float:left;
                    width:60%;
    
    }
    
    .sidebar{background-color:#fff;
             margin-top:125px;
             width:40%;
             padding: 5px 15px;
             float:left;
             right:0px;
             position:fixed;
    
    }
    
    
    .art_main{width:100%;padding-top:62px;
    margin:0 auto;
    }
    
    .art_main img{width:100%;padding:0px 7px 0px 0px;
    margin:0 auto;
    }
    
    
    
    
    h6{color:black;
    font-size:50px;
    padding:80px 0px 20px 0px;
    }
    
    h7{font-size:22px;padding-top:15px;
       font-weight:300px;
       color:green;
    
    }
    
    
    .photo_art_main{
        padding:10px 0px 10px 0px;
    
    }
    
    
    .img_1-1_art_main{background-image:url(images/cover_art.png);
    
    }
    
    
    
    
    
/*-------------------------
  8 - Responsive
-------------------------*/



@media only screen and (min-width:660px){



nav.res{display:none;


}



}



@media only screen and (max-width:659px){



.social_bar{display:none


}



}







@media only screen and (max-width:959px){
    
 
.logo_site span{
  display:none;
} 

.social_bar {
   float:left;
    margin-right: 10px;
    padding: 37px;
}






}








@media only screen and (min-width:960px){

.social_bar{
    float: right;
    margin-right: 10px;
    padding:37px;
}

                                
                                                 
                                                 
                                                 
                                                 
}




/* General style */
.grid-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.grid-gallery figure {
	margin: 0;
}

.grid-gallery figure img {
	display: block;
	width: 100%;
}

.grid-gallery figcaption h3 {
	margin: 0;
	padding: 0 0 0.5em;
}

.grid-gallery figcaption p {
	margin: 0;
}

/* Grid style */
.grid-wrap {
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1em 1.875em;
}

.grid {
	margin: 0 auto;
}

.grid li {
	width: 25%;
	float: left;
	cursor: pointer;
}

.grid figure {
	padding: 15px;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.grid li:hover figure {
	opacity: 0.7;
}

.grid figcaption {
	background: #e4e4e4;
	padding: 25px;
}

/* Slideshow style */
.slideshow {
	position: fixed;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.slideshow-open .slideshow {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.slideshow ul {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,150px);
	transform: translate3d(0,0,150px);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow ul.animatable li {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow-open .slideshow ul {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.slideshow li {
	width: 660px;
	height: 560px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -280px 0 0 -330px;
	visibility: hidden;
}

.slideshow li.show {
	visibility: visible;
}

.slideshow li:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.slideshow li.current:after {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure {
	width: 100%;
	height: 100%;
	background: #fff;
	border: 50px solid #fff;
	overflow: hidden;
}

.slideshow figcaption {
	padding-bottom: 20px;
}

.slideshow figcaption h3 {
	font-weight: 300;
	font-size: 200%;
}

/* Navigation */
.slideshow nav span {
	position: fixed;
	z-index: 1000;
	color: #59656c;
	text-align: center;
	padding: 3%;
	cursor: pointer;
	font-size: 2.2em;
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.slideshow nav span.nav-next {
	right: 0;
}

.slideshow nav span.nav-close {
	top: 0;
	right: 0;
	padding: 0.5em 1em;
	color: #31373a;
}

.icon:before,
.icon:after {
	font-family: 'fontawesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

span.nav-prev:before {
	content: "\e601";
}

span.nav-next:before  {
	content: "\e600";
}

span.nav-close:before {
	content: "\e602";
}

/* Info on arrow key navigation */
.info-keys {
	position: fixed;
	top: 10px;
	left: 10px;
	width: 60px;
	font-size: 8px;
	padding-top: 20px;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
}

.info-keys:before,
.info-keys:after {
	position: absolute;
	top: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
}

.info-keys:before {
	left: 10px;
	content: "\e603";
}

.info-keys:after {
	right: 10px;
	content: "\e604";
}

/* Example media queries (reduce number of columns and change slideshow layout) */

@media screen and (max-width: 60em) {
	/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
	.grid li {
		width: 33.3%;
	}

	.slideshow li {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
	}

	.slideshow li figure img {
		width: auto;
		margin: 0 auto;
		max-width: 100%;
	}

	.slideshow nav span,
	.slideshow nav span.nav-close {
		font-size: 1.8em;
		padding: 0.3em;
	}

	.info-keys {
		display: none;
	}

}

@media screen and (max-width: 35em) {
	.grid li {
		width: 50%;
	}
}

@media screen and (max-width: 24em) {
	.grid li {
		width: 100%;
	}
}




@media screen and (max-width: 1279px) {
.sidebar{
             display:none
    
    }

    

.colonne_middle{padding-left:267px;
                    background-color:white;
                    width:100%;
    
    
}



@media screen and (min-width: 1280px) {
     .colonne_middle{padding-left:267px;
                    background-color:white;
                    float:left;
                    width:60%;
    
    }
    
    .sidebar{background-color:#fff;
             margin-top:125px;
             width:40%
             padding: 5px 15px;
             float:left;
             right:0px;
             position:fixed;
    
    }
    
    
    
    }