/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
 
*{
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
html {
	scroll-behavior: smooth;
}
:focus {
	outline: 2px solid #ff6600;
}

.background-container{
	width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
    position: fixed;
    top: 0;
	z-index:0;
}

.fade-in {
  -webkit-animation-name: fadeInOpacity;
          animation-name: fadeInOpacity;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body {
    background-color:#0044cd;	
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
	background-color:#0044cd;
    text-transform:uppercase;
    width:100%;

	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
#full-logo{	
	text-align:center;
	vertical-align:middle;
    height: 100%;
    width: 100%;
	position:absolute;	
	z-index:8888;

}
#message {
    height: 100%;
    width: 100%;
	z-index:9999;

}
#logo img{	
	vertical-align:middle;
	width: 20%;
	height:auto;
}

#full-app{	
	vertical-align:middle;
	width: 100%;
	height: 100%;
}

#full-menu a{	
	color:#fff;
	text-decoration:none;
}

#full-menu{	
    width:100%;
	text-align:center;
	vertical-align:middle;
	color:#fff;
	font-family:Verdana, Geneva, sans-serif;
	position:absolute;
	top: 45%;
}
#full-menu2{	
    width:100%;
	text-align:center;
	vertical-align:middle;
	color:#fff;
	font-family:Verdana, Geneva, sans-serif;
	position:absolute;
	top: 50%;
}
#menu {
    z-index: 9999;
	position: relative;
    text-align: center;
}
#menu2 {
    z-index: 9999;
	position: relative;
    text-align: center;
}
#menu3 {
	z-index: 9999;
    position: relative;
    text-align: center;
    TOP: -10PX;
    /* line-height: 0; */

}
#menu4 {
    z-index: 9999;
	position: relative;
    text-align: center;
	TOP: -20PX;
    /* line-height: 0; */
}

#menu5 {
    z-index: 9999;
	position: relative;
    text-align: center;
}

#menu6 {
    z-index: 9999;
	position: relative;
    text-align: center;
	TOP: -10PX;
}

#menu #ligne img{
}
#menu2 #ligne img{
}
#menu3 #ligne img{
	width: 13%;
}
#menu4 #ligne img{
	width: 13%;
}
#menu5 #ligne img{
}
#menu6 #ligne img{
	width: 13%;
}

#ligne,#ligne2{	
    text-align: center;
	width: auto;

}	

/*#full-menu {top: 50%;}*/
#ligne3 {
    BOTTOM: 20PX;
    POSITION: fixed;
    top: 0;
    background: #002379;
    width: 100%;
    padding: 10px 0px;
    vertical-align: center;
    text-align: center;
    bottom: inherit;
}
#ligne2 {
    /* BOTTOM: 20PX; */
    POSITION: fixed;
    /* top: 0; */
    background: #000c3a;
    width: 100%;
    padding: 10px 0px;
    vertical-align: center;
    text-align: center;
    bottom: 20px;
}	

/* Opacity hover icones */

.icones a, .icones-2 a, .icones-3 a {
    display: initial;
}
.icones a img,.icones-2 a img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin-bottom: -15px;
}
.icones-3 a {

}
.icones-3 a img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.icones-3 a img:hover {
	opacity: .5;
	background: #ffffff26;
}
.icones a img:hover, .icones-2 a img:hover {
	opacity: .5;
	background: #000000d1;
}
/* Opacity hover vignettes*/

.vignettes a{
	border-radius: 200px;
	background: #000c3ad6;
	display: inline-flex;
}
.vignettes a img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.vignettes a img:hover {
	opacity: .5;
}

/* */

.vignettes a:hover{}

.icones-3{	
	/* word-spacing: 10px;*/
	display: contents;
	line-height: 0;
}

.icones, .icones-2{	
	word-spacing: 5px;
	display: initial;
	line-height: 0;
}
.vignettes{	
	word-spacing: 10px;
	display: initial;
	line-height: 0;
}
.vignettes img{	
    border-radius: 200px;
}	

#prochainement{	
	background: #000;
	display: inline-flex;

}	
#prochainement img{	
	opacity: 0.2;
}	
#menu-direct{
	text-align: center;
	vertical-align: middle;
	padding:10px;
	height:auto;
	float: left;
    color: #fff;
    font-family: sans-serif;
}
#menu-direct a{
	color:#fff;
	text-decoration:none;
}
#bar-info img{

}


video { 
 /*background:url(../img/fond-video.jpg) no-repeat center top;
background-size: cover;*/ 

}

body {
    /* -webkit-touch-callout: none;  */              /* prevent callout to copy image, etc when tap to hold */
    /* -webkit-text-size-adjust: none; */            /* prevent webkit from resizing text to fit */
    /* -webkit-user-select: none; */                 /* prevent copy paste, to allow, change 'none' to 'text' */
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
	background-position : top center ;
}

.icones-2 img { width: 15%; height:auto; }

.icones-3 img {
    width: 10%;
    height: auto;
    vertical-align: middle;
}
@media screen and (max-height: 500px) {

	.background-container {
		background:url('img/fondlancement.jpg') no-repeat bottom;
	}		
	#full-menu2 {
		top: 30%;
	}
}	
	
@media screen and (max-width: 2280px) and (max-height: 1080px) {}	
@media screen and (max-width: 3040px) and (max-height: 1440px) {}	

@media screen and (max-height:2160px) {
	.menu ul {
		padding-top: 50px !important;
    }

	.menu ul li a, .menu ul li label {
		line-height: 50px;
		font-size: 18px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 500;
		letter-spacing: 1px;
	}
	.icones a img, .icones-2 a img {margin-bottom: 10px;}


}
@media screen and (max-height:1080px) {
	.menu ul {
		padding-top: 50px !important;
    }
	
	.menu ul li a, .menu ul li label {
		line-height: 45px;
		font-size: 18px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 500;
		letter-spacing: 1px;
	}
	.icones a img, 	.icones-2 a img {margin-bottom: 0px;}


}
@media screen and (max-height:920px) {
	.menu ul {
		padding-top: 35px !important;
    }
	.menu ul li a, .menu ul li label {
		line-height: 45px;
		font-size: 18px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 500;
		letter-spacing: 1px;
	}
	.icones a img, .icones-2 a img {margin-bottom: -15px;}
}

@media screen and (max-height:720px) {
	.menu ul {
		padding-top: 15px !important;
    }
	.menu ul li a, .menu ul li label {
		line-height: 30px;
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
		font-weight: 500;
		letter-spacing: 1px;
		
	}
	.icones a img, .icones-2 a img {margin-bottom: -15px; WIDTH: 17%;}

}
@media screen and (max-height:380px) {

}
	

/* Portrait layout (default) */
.app {}

@media screen and (max-width:3840px) {
        #Faire-un-don img, #reseaux-sociaux img{ width: 136px;height: 136px;background: none;text-align: center; }
	#logo img { width: 180px; height: auto; }
	.vignettes img { width:250px; height:250px; }
	.icones img { width:300px; height:100%; }


	
	

}
@media screen and (max-width:1920px) {
        #Faire-un-don img, #reseaux-sociaux img{  width: 120px;height: 120px;background: none;text-align: center;}
	#logo img { width: 160px; height: auto; }
	.vignettes img { width:180px; height:180px; }
	.icones img { width:250px; height:100%; }


	

}
@media screen and (max-width:1580px) {


}
@media screen and (max-width:1280px) {
        #Faire-un-don img, #reseaux-sociaux img{  width: 100px;height: 100px;background: none;text-align: center;}
	#logo img { width: 110px; height: auto; }
	.vignettes img { width:120px; height:120px; }
	.icones img { width:180px; height:100%; }

	#ligne {padding-bottom: 20px;}


}
@media screen and (max-width:720px) {
	#logo img { width: 100px; height: auto; }
	.vignettes img { width:90px; height:90px; }
	.icones img { width:160px; height:100%; }




}
@media screen and (max-width:600px) {
        #Faire-un-don img, #reseaux-sociaux img{  width: 90px;height: 90px;background: none;text-align: center;}
	#logo img { width: 90px; height: auto; }
	.icones img { width:150px; height:100%; }





}
@media screen and (max-width:500px) {
        #Faire-un-don img, #reseaux-sociaux img{  width: 90px;height: 90px;background: none;text-align: center;}
	#logo img { width: 120px; height: auto; }
	.icones img { width:200px; height:100%; }




}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}




/* menu */

/* reset */
* {
  margin: 0;
  padding: 0;
}

#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;

}

label {
  cursor: pointer;
}
label:focus {
  outline: none;
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/pixelblanc.jpg) !important;
  width: 300px;
  height: 100%;
  transform: translate3d(-302px, 0, 0);
  transition: transform 0.35s;
  z-index: 2;
  color: #074281 !important;
}
.menu label.menu-toggle {
    color: #074281 !important;
    position: absolute;
    top: 5%;
    right: -61px;
    width: 62px;
    height: 60px;
    line-height: 0px;
    display: block;
    padding: 0;
    text-indent: -9999px;
    background: #fff url(../img/menu-alt-512.jpg) 50% 50%/60px 60px no-repeat;
    vertical-align: middle;
}


.menu ul li > label {
  color: #074281 !important;
  background: #fff url(../img/flechebleu.jpg) 95% 50%/16px 16px no-repeat;
}
.menu ul {
   /* position: relative;
    top: 35%;
	list-style: none;*/   
}
.menu ul {
    padding-top: 30px;
}

.menu ul li a, .menu ul li label {
    display: block;
    text-align: center;
    padding: 0 20px;
    text-decoration: none;
    color: #074281 !important;
}

.menu ul li a:hover, .menu ul li label:hover {
    color: #074281 !important;
}

/* hide inputs */          
.menu-checkbox {
  display: none;
}

/* hide navigation icon for sublabels */    
.menu .menu label.menu-toggle {
  background: none;
}

/* fade in checked menu */    
.menu-checkbox:checked + .menu {
  transform: translate3d(0, 0, 0);
}

/* for show */
html, body {
  height: 100%;
}

a  {
  color: #074281 !important;
}
p {
  margin-bottom: 15px;
  color: #074281 !important;
}

#info {
  display: table;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  width: 100%;
}
#info #info-content {
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;
  
  padding-bottom: 50px;
	
}
#info #info-content h1 {
  color: #fff;
  border: 3px solid #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  font-size: 22px;
  font-weight: normal;
  padding: 20px;
  margin: 10px;
  display: inline-block;
}
#info #info-content h1 strong {
  display: block;
  font-size: 26px;
}
   
body{
  background-color:black;
}

.native_mode{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
}
.zoomed_mode{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  max-height: 100%;
  width: 100%;
}