/****************************************************
#####################################################
##-------------------------------------------------##
##               kingkong - Version 1              ##
##-------------------------------------------------##
## Copyright = diabloedesign.com- 2021             ##
## Date      = aout 2021                           ##
## Author    = olivier angevin                     ##
## Websites  = http://www.diabloedesign.com        ##
##                                                 ##
#####################################################
****************************************************/
@charset "UTF-8";
@font-face {
font-family: 'edo_szregular';
src: url('../fonts/edosz.ttf') format('truetype'),
	 url('../fonts/edosz-webfont.woff2') format('woff2'),
	 url('../fonts/edosz-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html {
height: 100%;
}
body{
margin:0;
padding:0;
font-size:16px;
color:#fff;
font-family: arial, tahoma, sans-serif;
outline: none;
height:100%;
background: #1d1d1b;
text-align:center;
}
/*texte*/
h1, h2, h3{
font-family: edo_szregular, arial, tahoma, sans-serif;
font-size: 24px;
font-weight:normal;
color:#34d330;
text-align:center;
}
h3{
font-size: 20px;
}
h4, h5, h6 {
font-size: 100%;
}
h4{
color:#34d330;
text-align:center;
}
a{
outline:none;
transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
}
a:visited, a:link{
color:#fff;
text-decoration:none;
}
a:hover{
color:#34d330;
}
img{
margin:0px;
border:0px;
max-width:100%;
height:auto;
}
ul{
padding-left:20px;
}
label.invalid{
color:#C90000;
}
.invalid{
border-color:#C90000;
}
/*****CONTENU********/
.navigation-small{
position: fixed;
top:50px;
max-height:0;
transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
overflow:hidden;
width:100%;
z-index:500;
}
.open-navigation{
max-height:800px;
border-top:2px solid #34d330;
background:#000;
}
#container{
width:100%;
min-height:100%;
height:100%;
position:relative;
}
.pagewidth{
width:1000px;
background:transparent;
margin:0 auto;
text-align:left;
position:relative;
}
.header{
position:relative;
width:100%;
overflow:hidden;
}
.header .moduletable{
position:absolute;
bottom:20px;
width:100%;
}
.header .moduletable h1{
color:#FFF;
text-align:center;
font-size:60px;
text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
}
.kingkong{
position:absolute;
bottom:-40px;
z-index:30;
left:50%;
margin-left:50px;
width:385px;
}
.sarah-jeanne{
position:absolute;
bottom:-10px;
z-index:35;
left:50%;
width:408px;
margin-left:-250px;
}
.corde-ring{
position:absolute;
width:100%;
bottom:-80px;
z-index:40;
}
#scrolldown{
margin-top:10px;
position:absolute;
bottom:20px;
left:50%;
margin-left:-22px;
z-index:50;
}
#scrolldown a{
background: transparent;
border: 4px solid #34d330;
border-radius: 50%;
color: #34d330;
display: block;
font-size: 30px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
#scrolldown a:hover{
background: #34d330 none repeat scroll 0 0;
color: #fff;
}
.menu-fixed{
top:0;
width:100%;
background:#000;
position:fixed;
z-index:500;
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.75);
}
.menu-fixed .pagewidth{
position:relative;
}
.menu-fixed .logo{
width:90px;
height:auto;
margin-left:10px;
margin-right:10px;
margin-top:10px;
}
.container-accueil .menu-fixed .logo{
width:200px;
}
#top-menu {
height:80px;
}
#top-menu ul.menu{
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items:center;
margin: 0;
padding:0;
font-family: edo_szregular, arial, tahoma, sans-serif;
height:80px;
}
#top-menu .menu li{
list-style-type:none;
position:relative;
font-size:18px;
color:#34d330;
padding:0 10px;
}
#top-menu ul li a{
color:#34d330;
}
#top-menu ul li span{
transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
}
#top-menu ul li a:hover, #top-menu ul li.active a, #top-menu ul li span:hover, #top-menu ul li.active span{
font-weight:normal;
}
#top-menu ul li a::after{
content:'';
width:0;
height:2px;
background:#fff;
display:block;
transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
}
#top-menu ul li a:hover::after, #top-menu ul li.active a::after{
width:100%;
}
#top-menu .menu li ul.nav-child{
position: absolute;
top: calc(100%);
min-width: 100%;
background:#000;
transform: translate3d(0, 30px, 0);
z-index: 100;
display: block;
visibility: hidden;
opacity: 0;
transition:all 0.3s ease-in-out;
padding:0;
left:0;
}
#top-menu .menu li:hover ul.nav-child{
opacity:1;
visibility:visible;
transform:none;
}
#top-menu .menu li ul.nav-child li{
font-size:16px;
line-height:30px;
text-shadow:none;
}
#top-menu .menu li.active ul.nav-child li a{
color:#e7e8e9;
}
#top-menu .menu li.active ul.nav-child li a:hover, #top-menu .menu li.active ul.nav-child li.active a{
color:#bf1e2e;
}
#top-menu .menu-left .menu li.actualites, #top-menu .menu-left .menu li.tsunamuay, #top-menu .menu-left .menu li.contact,
#top-menu .menu-right .menu li.presentation, #top-menu .menu-right .menu li.galerie, #top-menu .menu-right .menu li.combattants{
display:none;
}
#small-menu, .fond-ring-s{
display:none;
}
#content{
background-color:transparent;
position:relative;
width:100%;
padding-top:50px;
padding-bottom:50px;
z-index:10;
}
.textes, .field17 .visCSSlabel{
hyphens: auto;
hyphenate-limit-lines:2;
-moz-hyphens: auto;
-moz-hyphenate-limit-lines:2;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-lines:2;
-ms-hyphens: auto;
-ms-hyphenate-limit-lines:2;
text-align:justify;
}
.flex-elements{
display:flex;
}
.flex-center{
justify-content:center;
}
.image-left{
margin-right:20px;
}
ul.flex-elements{
padding:0;
list-style:none;
margin:0;
}
.clr{
clear:both;
}
.readmore{
text-align:center;
}
.readmore a, a.btn{
font-family: arial, tahoma, sans-serif;
color:#FFF;
font-size:18px;
background:#34d330;
border-radius:5px;
line-height:50px;
padding:0 30px;
display:inline-block;
}
.item-page{
position:relative;
}
.page-header{
padding-bottom:50px;
}
.container-accueil .content .pagewidth{
width:1300px;
}
.container-accueil .content .item-page{
min-height:540px;
}
.tetegorille{
position:absolute;
top:0;
}
.tetegorilleleft{
left:0;
}
.tetegorilleleft img{
transform:scale(-1,1);
}
.tetegorilleright{
right:0;
}
.container-accueil .textes{
width:440px;
margin:0 auto;
padding-top:10px;
}
.container-accueil .textes .readmore{
margin-top:40px;
}
section.inscriptions a{
width:100%;
font-size:150%;
background:#34d330;
padding-top:20px;
padding-bottom:20px;
text-transform:uppercase;
display:block;
}
section.inscriptions a:hover{
color:#1d1d1b;
}
.container-presentation .leading-5{
font-size:12px;
}
.container-presentation .element-left{
margin-right:55px;
}
.container-galerie .header, .container-actualites .header, .container-tsunamuay .header{
padding-top:80px;
}
.container-galerie .page-header{
padding-bottom:0;
padding-top:40px;
}
.container-galerie .leading-0 .page-header{
padding-top:0;
}
.carte iframe{
width:480px;
border:1px solid #34d330;
border-radius:5px;
}
.pagination{
text-align:center;
}
.pagination ul{
display:flex;
flex-wrap:wrap;
justify-content:center;
padding:0;
margin:0;
list-style:none;
}
.pagination ul li{
margin:10px;
}
.pagination ul li a{
color:#34d330;
}
.gallery{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
.gallery_img{
margin:10px;
}
.gallery_img img{
height:200px;
width:auto;
border:4px solid #FFF;
cursor:pointer;
}
.flex-elements .textes{
flex-grow:1;
}
.container-actualites .item-page .flex-elements{
flex-wrap:wrap;
align-items:center;
}
.container-actualites .item-page .flex-elements .image-left{
width:400px;
}
.container-actualites .item-page .items-row{
padding-bottom:40px;
}
.container-actualites .item-page .flex-elements .textes{
width:calc(100% - 420px);
}
.container-actualites .item-page .flex-elements .textes .readmore{
margin-top:50px;
}
.contact-bas{
padding-bottom:50px;
position:relative;
}
.contact-bas .tetegorilleright{
z-index:40;
top:100px;
right:-200px;
}
.contact-bas h3, .moduletable h3{
font-size:36px;
}
.contact-bas .pagewidth{
align-items:center;
position:relative;
}
.contact-bas .logo{
margin-right:50px;
flex-grow:1;
max-width:500px;
}
.contact-bas .formulaire{
width:480px;
position:relative;
z-index:50;
}
.visform fieldset{
padding:0;
margin:0 auto;
border:0;
width:100%;
}
.visform input:not(.btn), .visform textarea{
background:#3d3d3c!important;
width:calc(100% - 16px);
border:1px solid #34d330;
line-height:1.2em !important;
padding: 8px;
font-size:16px;
color:#FFF;
font-family: arial, tahoma, sans-serif;
margin-top:20px;
border-radius:5px;
}
.visform .input-content{
float:left;
width:100%;
}
.visform .asterix-ancor{
display:none;
}
.visform textarea{
height:100px;
}
.visform .btn{
margin:0 auto;
}
.vis_mandatory{
width:100%;
color:#fff;
text-align:center;
float:left;
margin-top:0;
}
.field1, .field2, .field3, .field4{
width:calc(50% - 10px);
float:left;
}
.field1, .field3{
margin-right:10px;
}
.field2, .field4{
margin-left:10px;
}
.visform .field1 input, .visform .field2 input{
margin-top:0;
}
.field3, .field5{
clear:both;
}
.field7{
position:relative;
}
.visform .field7 input{
position:absolute;
top:12px;
left:0;
width:auto!important;
margin-top:0
}
.field7 .visCSSlabel{
margin-left:30px;
margin-top:10px;
width:auto;
font-size:12px;
}
.visform .required{
position:relative;
}
.visform .errorcontainer{
position:absolute;
left:100px;
top:-10px;
}
.visform .errorcontainer{
width:200px;
top:-50px;
z-index:100;
}
form#mod-visform1 div.required > label.visCSSlabel::after{
color:#FFF;
}
.visBtnCon{
clear:both;
float:right;
}
.visform input[type=submit]{
cursor:pointer;
background:url("../images/envoyer.png") repeat center top transparent!important;
width:80px;
height:80px;
text-indent:-99999px;
border:0;
}
.parallax-section {
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
background-repeat:repeat-y;
overflow:hidden;
background-attachment:fixed !important;
}
.no-parallax-section{
display:none;
}
#parallax-acc, #no-parallax{
background-image:url('../images/ring.jpg');
position:relative;
height:100%;
min-height:100%;
}
#parallax-bas{
background-image:url('../images/parallax-accueil.jpg');
position:relative;
height:80%;
min-height:80%;
}
.container-presentation #parallax-bas{
background-image:url('../images/parallax-presentation.jpg');
}
.container-combattants #parallax-bas{
background-image:url('../images/parallax-combattants.jpg');
}
.container-actualites #parallax-bas{
background-image:url('../images/parallax-actualites.jpg');
}
.ombre-top{
width:100%;
height:9px;
position:absolute;
top:0;
z-index:100;
background:url("../images/ombre-top.png") repeat center top transparent;
}
.ombre-bottom{
width:100%;
height:9px;
position:absolute;
bottom:0;
z-index:100;
background:url("../images/ombre-bottom.png") repeat center top transparent;
}
.footer{
border-top:4px solid #34d330;
position:relative;
font-size:16px;
line-height:18px;
padding-top:20px;
padding-bottom:20px;
clear:both;
background:#3d3d3c;
color:#FFF;
font-size:14px;
}
.footer .flex-elements{
align-items:center;
}
.reseaux a{
font-size:50px;
color:#34d330;
margin-right:20px;
}
.menu-bas ul{
margin:0;
margin-left:60px;
margin-right:20px;
}
.telephone{
margin-left:60px;
font-size:24px;
}
.telephone i{
color:#34d330;
margin-right:10px;
}
.copyright{
margin-top:20px;
}
#scrollup{
bottom: 20px;
opacity:0;
position: fixed;
right: 20px;
z-index: 200;
}
#scrollup a{
background: transparent;
border: 4px solid #34d330;
border-radius: 50%;
color: #34d330;
display: block;
font-size: 30px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
#scrollup a:hover{
background: #34d330 none repeat scroll 0 0;
color: #fff;
}
.animated{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility:hidden;
}
.animated2{
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.slideshow{
overflow: hidden;
max-width: 750px;
position: relative;
margin:40px auto;
height:420px;
border:1px solid #34d330;
border-radius:5px;
visibility:visible;
}
.slideshow ul{
padding:0;
margin:0;
position:relative;
list-style-type: none;
}
.slideshow li{
position:absolute;
top:0;
left:0;
animation: slideshow 25s ease infinite;
opacity: 0;
}
.slideshow li:nth-child(2){
animation-delay: 5s;
}
.slideshow li:nth-child(3){
animation-delay: 10s;
}
.slideshow li:nth-child(4){
animation-delay: 15s
}
.slideshow li:nth-child(5){
animation-delay: 20s
}
.slideshow li:nth-child(6){
animation-delay: 25s
}
.slideshow li:nth-child(7){
animation-delay: 30s
}
.slideshow li:nth-child(8){
animation-delay: 35s
}
.slideshow li:nth-child(9){
animation-delay: 40s
}
@keyframes slideshow{	
0%{opacity: 0}
10%{opacity: 1}
20%{opacity: 1}
25%{opacity: 0}
100%{opacity: 0}	
} 
.barre_progression{ 
position: absolute;
left: 0;
bottom: 0px;
height: 5px;
background: #34d330;
animation: barre_progression 25s ease-out infinite;
}
/*****animation barre progression *****/    
@keyframes barre_progression{	
0%,20%,40%,60%,80%,100%{width: 0%;opacity: 0}
4%,24%,44%,64%,84%{width: 0%;opacity: .3}
16%,36%,56%,76%,96%{width: 100%;opacity: .7}
17%,37%,57%,77%,97%{width: 100%;opacity: .3}
18%,38%,58%,78%,98%{width: 100%;opacity: 0}
}
@-webkit-keyframes souligne {  
0% {
width:0;
} 
100% {
width:200px;
}
}
@keyframes souligne {  0% {    
 width:0;
 }  
 100% {
width:200px;
}}
.souligne {
-webkit-animation-name: souligne;
animation-name: souligne;
visibility:visible;
height:2px;
background:#34d330;
margin:0 auto;
}
@-webkit-keyframes scaleUp {  
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 
100% {
-webkit-transform: scale(1);
    transform: scale(1);
	}
}
@keyframes scaleUp {  0% {    
 -webkit-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 }  
 100% {
	-webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}}
.scaleUp {
-webkit-animation-name: scaleUp;
animation-name: scaleUp;
visibility:visible;
}
@-webkit-keyframes slideInTop {  
0% {    opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
} 
100% {
-webkit-transform: translateY(0);
    transform: translateY(0);
	}
}
@keyframes slideInTop {  0% {    opacity: 0;
 -webkit-transform: translateY(50px);
 -ms-transform: translateY(50px);
 transform: translateY(50px);
 }  
 100% {
-webkit-transform: translateY(0);
    -ms-transform: translateY(0);    transform: translateY(0);
}}
.slideInTop {
-webkit-animation-name: slideInTop;
animation-name: slideInTop;
visibility:visible;
}
@-webkit-keyframes slideInBottom {  0% {    opacity: 0;
-webkit-transform: translateY(-40px);
    transform: translateY(-40px);
}  
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
  }}
  @keyframes slideInBottom {  0% {    opacity: 0; 
  -webkit-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  transform: translateY(-40px);
  }  
  100% { 
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);    transform: translateY(0);
  }}
.slideInBottom {
-webkit-animation-name: slideInBottom;
animation-name: slideInBottom;
visibility:visible;
}
@-webkit-keyframes slideInLeft {  0% {    opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px); 
}  
100% {   
-webkit-transform: translateX(0);
transform: translateX(0);
  }}  
@keyframes slideInLeft {  0% {    opacity: 0;  
 -webkit-transform: translateX(-2000px);
 -ms-transform: translateX(-2000px); 
 transform: translateX(-2000px);
 } 
 100% {  
 -webkit-transform: translateX(0);   
 -ms-transform: translateX(0); 
 transform: translateX(0); 
 }}
 .slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
visibility:visible;
}
@-webkit-keyframes flipInX{	0%{		opacity:0;		
-webkit-transform:perspective(400px) rotateX(90deg);
transform:perspective(400px) rotateX(90deg);	
}	
40%{
-webkit-transform:perspective(400px) rotateX(-10deg);
transform:perspective(400px) rotateX(-10deg);
	}
70%{
-webkit-transform:perspective(400px) rotateX(10deg);
transform:perspective(400px) rotateX(10deg);	
}	
100%{
-webkit-transform:perspective(400px) rotateX(0deg);
transform:perspective(400px) rotateX(0deg);		opacity:1	
}}
@keyframes flipInX{	0%{		opacity:0;	
-webkit-transform:perspective(400px) rotateX(90deg);
-ms-transform:perspective(400px) rotateX(90deg);
transform:perspective(400px) rotateX(90deg);
}	
40%{
-webkit-transform:perspective(400px) rotateX(-10deg);
-ms-transform:perspective(400px) rotateX(-10deg);
transform:perspective(400px) rotateX(-10deg);
}	
70%{		
-webkit-transform:perspective(400px) rotateX(10deg);	
	-ms-transform:perspective(400px) rotateX(10deg);
	transform:perspective(400px) rotateX(10deg);
}
100%{
-webkit-transform:perspective(400px) rotateX(0deg);
-ms-transform:perspective(400px) rotateX(0deg);
transform:perspective(400px) rotateX(0deg);
opacity:1;	
}}
.flipInX{
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important;
-webkit-animation-name:flipInX;
animation-name:flipInX;
visibility:visible;
}
@-webkit-keyframes flipInY{	0%{		opacity:0;
-webkit-transform:perspective(400px) rotateY(90deg);
transform:perspective(400px) rotateY(90deg);	
}	
40%{
-webkit-transform:perspective(400px) rotateY(-10deg);
transform:perspective(400px) rotateY(-10deg);
}	
70%{
-webkit-transform:perspective(400px) rotateY(10deg);		
transform:perspective(400px) rotateY(10deg);
}	
100%{
-webkit-transform:perspective(400px) rotateY(0deg);	
transform:perspective(400px) rotateY(0deg);
opacity:1;
}}
@keyframes flipInY{	0%{		opacity:0;		
-webkit-transform:perspective(400px) rotateY(90deg);
-ms-transform:perspective(400px) rotateY(90deg);
transform:perspective(400px) rotateY(90deg);
}	
40%{
-webkit-transform:perspective(400px) rotateY(-10deg);
-ms-transform:perspective(400px) rotateY(-10deg);
transform:perspective(400px) rotateY(-10deg);
}
70%{	
-webkit-transform:perspective(400px) rotateY(10deg);
-ms-transform:perspective(400px) rotateY(10deg);
transform:perspective(400px) rotateY(10deg);
}	
100%{
-webkit-transform:perspective(400px) rotateY(0deg);
-ms-transform:perspective(400px) rotateY(0deg);
transform:perspective(400px) rotateY(0deg);
opacity:1;
}}
.flipInY{
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important;
-webkit-animation-name:flipInY;
animation-name:flipInY;
visibility:visible;
}
@-webkit-keyframes bounceInDown{0%{opacity:0;
-webkit-transform:translateY(-2000px);
transform:translateY(-2000px)
}
60%{
opacity:1;
-webkit-transform:translateY(30px);
transform:translateY(30px)
}
80%{
-webkit-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
-webkit-transform:translateY(0);
transform:translateY(0)
}}
@keyframes bounceInDown{0%{opacity:0;
-webkit-transform:translateY(-2000px);
-ms-transform:translateY(-2000px);
transform:translateY(-2000px)
}
60%{
opacity:1;
-webkit-transform:translateY(30px);
-ms-transform:translateY(30px);
transform:translateY(30px)
}
80%{
-webkit-transform:translateY(-10px);
-ms-transform:translateY(-10px);
transform:translateY(-10px)
}
100%{
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)}
}
.bounceInDown{
-webkit-animation-name:bounceInDown;
animation-name:bounceInDown;
visibility:visible;
}
@-webkit-keyframes bounceInLeft{	0%{		opacity:0;
-webkit-transform:translateX(-2000px);
transform:translateX(-2000px);	
}	
60%{		
opacity:1;		
-webkit-transform:translateX(30px);		
transform:translateX(30px);	
}	
80%{		
-webkit-transform:translateX(-10px);		
transform:translateX(-10px);	
}	
100%{		
-webkit-transform:translateX(0);		
transform:translateX(0);	
}}
@keyframes bounceInLeft{	0%{		opacity:0;		
-webkit-transform:translateX(-2000px);		
-ms-transform:translateX(-2000px);		
transform:translateX(-2000px);	
}	
60%{		
opacity:1;		
-webkit-transform:translateX(30px);		
-ms-transform:translateX(30px);		
transform:translateX(30px);	
}	
80%{		
-webkit-transform:translateX(-10px);
-ms-transform:translateX(-10px);
		transform:translateX(-10px);
}	
100%{		
-webkit-transform:translateX(0);		
-ms-transform:translateX(0);		
transform:translateX(0);	
}}
.bounceInLeft{
-webkit-animation-name:bounceInLeft;
animation-name:bounceInLeft;
visibility:visible;
}
@-webkit-keyframes bounceInRight{0%{opacity:0;
-webkit-transform:translateX(2000px);
transform:translateX(2000px)
}
60%{
opacity:1;
-webkit-transform:translateX(-30px);
transform:translateX(-30px)
}
80%{
-webkit-transform:translateX(10px);
transform:translateX(10px)
}
100%{
-webkit-transform:translateX(0);
transform:translateX(0)}
}
@keyframes bounceInRight{0%{opacity:0;
-webkit-transform:translateX(2000px);
-ms-transform:translateX(2000px);
transform:translateX(2000px)
}
60%{opacity:1;
-webkit-transform:translateX(-30px);
-ms-transform:translateX(-30px);
transform:translateX(-30px)
}
80%{
-webkit-transform:translateX(10px);
-ms-transform:translateX(10px);
transform:translateX(10px)
}
100%{
-webkit-transform:translateX(0);
-ms-transform:translateX(0);
transform:translateX(0)}
}
.bounceInRight{
-webkit-animation-name:bounceInRight;
animation-name:bounceInRight;
visibility:visible;
}
@-webkit-keyframes bounceInUp{0%{opacity:0;
-webkit-transform:translateY(2000px);
transform:translateY(2000px)
}
60%{opacity:1;
-webkit-transform:translateY(-30px);
transform:translateY(-30px)
}
80%{
-webkit-transform:translateY(10px);
transform:translateY(10px)
}
100%{
-webkit-transform:translateY(0);
transform:translateY(0)}
}
@keyframes bounceInUp{0%{opacity:0;
-webkit-transform:translateY(2000px);
-ms-transform:translateY(2000px);
transform:translateY(2000px)
}
60%{
opacity:1;
-webkit-transform:translateY(-30px);
-ms-transform:translateY(-30px);
transform:translateY(-30px)
}
80%{
-webkit-transform:translateY(10px);
-ms-transform:translateY(10px);
transform:translateY(10px)
}
100%{
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0)}
}
.bounceInUp{
-webkit-animation-name:bounceInUp;
animation-name:bounceInUp;
visibility:visible;
}
@-webkit-keyframes slideInRight {  0% {    opacity: 0;
-webkit-transform: translateX(2000px); 
transform: translateX(2000px);  
}  
100% {
-webkit-transform: translateX(0);    
transform: translateX(0);  }
}
@keyframes slideInRight {  0% {    opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);    
transform: translateX(2000px);  
}  
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);	
transform: translateX(0);  }
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
visibility:visible;
}
.full_image{
background-color:rgba(0, 0, 0, 0.5);
position:fixed;
display:none;
width:100%;
height:100%;
z-index:1000;
top:0;left:0;
}
.image_loading{position:absolute;display:none;top:50%;left:50%;margin:-35px 0px 0px -35px;background:#fff url(../images/loader.gif) no-repeat center center;width:70px;height:70px;z-index:9999;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
#img_close{
width:40px;
height:40px;
position:absolute;
top:-20px;
right:-20px;
cursor:pointer;
z-index:400;
border-radius:50%;
font-size:40px;
text-align:center;
line-height:40px;
color:#fff;
background:#34d330;
transform:rotate(45deg);
}
.img_previous, .img_next{
width:40px;
height:40px;
background:#34d330;
position:fixed;
top:50%;
margin-top:-20px;
cursor:pointer;
z-index:1400;
font-size:40px;
text-align:center;
line-height:40px;
color:#fff;
border-radius:50%;
}
.img_previous{left:1%;}
.img_next{right:1%;}
.img_full{
position:fixed;
top:150%;
left:50%;
margin-left:-520px;
z-index:300;
background:#FFF;
padding:20px;
width:1000px;
height:400px;
margin-top:-220px;
color:#000;
}
@media screen and (max-width: 1300px){
	.container-accueil .content .pagewidth{
	width:calc(100% - 20px);
	}
	.container-accueil .content .tetegorille{
	width:300px;
	}
	.header{
	padding-top:80px;
	}
}
@media screen and (max-width: 1100px){
	.container-accueil .content .tetegorille{
	width:200px;
	}
}
/**end file***/