@charset "utf-8";
/* CSS Document */

 * {
                margin: 0;
                padding: 0;
            }
            body {
               
				
                background-image: url(images/bg_image_noir.JPG);
				background-size: cover;
				background-repeat: no-repeat;
				background-attachment:fixed;
				font-family: 'Oxygen', sans-serif;
				width: 100%;
				height: 100%;
            }
/*effect sur XIXI QU et bg d'accueil*/
			#mypage{
	  			background-image: url(images/bg_accueil.PNG);
				background-size: cover;
				background-repeat: no-repeat;
				background-attachment:fixed;
				font-family: 'Oxygen', sans-serif;
				width: 100%;
				height: 100%;
				color: white;
				text-align: center;
				}
            .fly-in-text {
                list-style: none;
             
               
			text-transform: capitalize;
                
            }
            .fly-in-text li {
                display: inline-block;
               
                
                font-weight: 300;
                font-size: 4em;
               
                opacity: 1;
                transition: all 2.5s ease;
            }
                    
            .fly-in-nom {
                list-style: none;
               
            }
            .fly-in-nom li {
                display: inline-block;
                
              
                font-weight: 300;
                font-size: 4em;
              
                opacity: 1;
                transition: all 2.5s ease;
            }
          
            .fly-in-text.hidden li {
                opacity: 0;
            }
            .fly-in-text.hidden li:nth-child(1) { transform: translateX(-200px) translateY(-200px); }
            .fly-in-text.hidden li:nth-child(2) { transform: translateX(20px) translateY(100px); }
            .fly-in-text.hidden li:nth-child(3) { transform: translateX(-150px) translateY(-80px); }
            .fly-in-text.hidden li:nth-child(4) { transform: translateX(10px) translateY(-200px); }

            .fly-in-nom.hidden li {
                opacity: 0;
            }
            .fly-in-nom.hidden li:nth-child(1) { transform: translateX(-200px) translateY(-200px); }
            .fly-in-nom.hidden li:nth-child(2) { transform: translateX(20px) translateY(100px); }
			#center_text{

				width: 15%;
				margin: 15% auto auto auto;
				background-color:rgba(0,0,0,0.59);
			}

			#mypage hr{
				margin-left: 5%;
				margin-right: 5%;
			}
			#barre_naviga ul{
				 list-style: none;

			}
			#barre_naviga li{
				display: inline-block;
				color: white;
				 font-weight: 300;
				 font-size: 2em;

				 opacity: 1;
				 transition: all 2.5s ease;
				margin-top: 10%;
				padding: 3%;
				text-shadow: 3px 0px 5px rgba(150, 150, 150, 1);
			}
			#barre_naviga a{
				color: white;
				text-decoration: none;
			}
			#barre_naviga a:hover{

				text-decoration: line-through;
			}
/* effet sur les blocks du page d'accueil*/

@keyframes apparition_opacity {
    from {opacity:0;}
    to {opacity: 1;}
}

#barre_naviga{
   
    animation-name: apparition_opacity;
    animation-duration: 5s;
}
#center_text{
	animation-name: apparition_opacity;
    animation-duration: 5s;
}
           
/*pages*/
			.contain{
			
				width: 100%;
				height: 100%;
				 background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
				background-size: 100% auto;
				background-repeat: no-repeat;
				background-attachment:fixed;

			}
			.background1, .background2{
				position:fixed;
				height: 100%;
				background-attachment:fixed;
			}
@keyframes apparition_opacity_bg {
    from {opacity:0.3;}
    to {opacity: 1;}
}

			.background1{
				background-color:rgba(255,159,142,0.95);
				animation-name: apparition_opacity_bg;
    animation-duration: 1.5s;
			}
			.background2{
				margin-left: 33.25%;
				background-color:rgba(98,134,140,0.90);
				animation-name: apparition_opacity_bg;
    animation-duration: 1.5s;
			}

			.titre-page{
				position: absolute;
				width: 100%;
				padding-top:1%;
				color: rgba(255,255,255,0.49);
				
				
			}
			.titre-page h1{
				font-size: 17vw;
				text-decoration:line-through;
				position: relative;
			}
			.titre-page hr{
				height: 50%;
				width: 50%;
				color: rgba(255,255,255,0.49);
			}
/*animation*/
@keyframes fadeinleft{
	from {left: -800px;}
    to {left: 0;}
}
@keyframes fadeinright{
	from {
	opacity: 0;
	}
    to {
	opacity: 1;
	}
}
.titre-page h1{
	animation-name: fadeinleft;
    animation-duration: 1.5s;
	
	animation-timing-function: ease-in;
}
.petit_conte{
	position: relative;
	animation-name: fadeinright;
    animation-duration: 5s;
	

}
/*navigation*/
			.navbar-default {
			  background-color: transparent;
				border-color: transparent;
				animation: apparition_opacity;
				animation-duration: 2s;
			}
			.navbar-default .navbar-brand {
			  color: #282828;
				font-size: 3vw;
				text-decoration:line-through;
				
			}
			.navbar-default .navbar-brand:hover,
			.navbar-default .navbar-brand:focus {
			  color: #282828;
			  background-color: transparent;
				text-decoration:none;
			}

			.navbar-default .navbar-nav > li > a {
			  color: #282828;
				font-size: 1.5vw;
			}
			.navbar-default .navbar-nav > li > a:hover,
			.navbar-default .navbar-nav > li > a:focus {
			  color: #282828;
			  background-color: transparent;
				text-decoration:line-through;
			}
			.navbar-default .navbar-nav > .active > a,
			.navbar-default .navbar-nav > .active > a:hover,
			.navbar-default .navbar-nav > .active > a:focus {
			  color: #282828;
				text-decoration:line-through;
			  background-color: transparent;
			}

			.navbar-default .navbar-toggle {
			  border-color: #f8f0ee;
			}
			.navbar-default .navbar-toggle:hover,
			.navbar-default .navbar-toggle:focus {
			  background-color:#003c46;
			}
			.navbar-default .navbar-toggle .icon-bar {
			  background-color: #f8f0ee;
			}
			.navbar-default .navbar-collapse,
			.navbar-default .navbar-form {
			  border-color: #e7e7e7;
			}


/*timeline*/
			#timeline{
				padding-left: 25%;
				height: 50vh;
				overflow-y: scroll;
				
			}
			#timeline::-webkit-scrollbar {
				width: 3px;
			}

			#timeline::-webkit-scrollbar-track {
				/*box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
			}

			#timeline::-webkit-scrollbar-thumb {
			  background-color: #f8f0ee;
			  outline: 1px solid slategrey;
			}
			/** timeline box structure **/
			.timeline {
			  list-style: none;
			  padding: 20px 0 20px;
			  position: relative;
			}

			.timeline:before {
			  top: 0;
			  bottom: 0;
			  position: absolute;
			  content: " ";
			  width: 3px;
			  background-color: rgba(143,139,139,0.78);
			  left: 50%;
			  margin-left: -1.5px;
			}

			.tldate {
			  display: block;
			  width: 200px;
			  background-color: rgba(90,88,88,0.75);
			  border: none;
			  color: #ededed;
			  margin: 0 auto;
			  padding: 3px 0;
			  font-weight: bold;
			  text-align: center;
			  box-shadow: 0 0 11px rgba(0,0,0,0.35);
			}

			.timeline li {
			  margin-bottom: 1%;
			  position: relative;
			}

			.timeline li:before, .timeline li:after {
			  content: " ";
			  display: table;
			}
			.timeline li:after {
			  clear: both;
			}
			.timeline li:before, .timeline li:after {
			  content: " ";
			  display: table;
			}

			/** timeline panels **/
			.timeline li .timeline-panel {
			  width: 46%;
			  float: left;
			  background-color: rgba(204,204,204,0.58);
			  border: none;
			  padding: 20px;
			  position: relative;
			/*  -webkit-border-radius: 8px;
			  -moz-border-radius: 8px;
			  border-radius: 8px;*/
			  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
			  -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
			  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
			}

			/** panel arrows **/
			/*.timeline li .timeline-panel:before {
			  position: absolute;
			  top: 26px;
			  right: -15px;
			  display: inline-block;
			  border-top: 15px solid transparent;
			  border-left: 15px solid #ccc;
			  border-right: 0 solid #ccc;
			  border-bottom: 15px solid transparent;
			  content: " ";
			}
*/
			/*.timeline li .timeline-panel:after {
			  position: absolute;
			  top: 27px;
			  right: -14px;
			  display: inline-block;
			  border-top: 14px solid transparent;
			  border-left: 14px solid #fff;
			  border-right: 0 solid #fff;
			  border-bottom: 14px solid transparent;
			  content: " ";
			}*/
			.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
			  top:0;
			  right:0;
			  display: none;
			  border: 0;
			}

			.timeline li.timeline-inverted .timeline-panel {
			  float: right;
			}

			.timeline li.timeline-inverted .timeline-panel:before {
			  border-left-width: 0;
			  border-right-width: 15px;
			  left: -15px;
			  right: auto;
			}

			.timeline li.timeline-inverted .timeline-panel:after {
			  border-left-width: 0;
			  border-right-width: 14px;
			  left: -14px;
			  right: auto;
			}


			/** timeline circle icons **/
			.timeline li .tl-circ {
			  position: absolute;
			  top: 23px;
			  left: 50%;
			  text-align: center;
			  background: #ff9f8f;
			  color: #fff;
			  width: 20px;
			  height: 20px;
			  line-height: 20px;
			  margin-left: -10px;			  
			  border-top-right-radius: 50%;
			  border-top-left-radius: 50%;
			  border-bottom-right-radius: 50%;
			  border-bottom-left-radius: 50%;
			  z-index: 99999;
				 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
			}


			/** timeline content **/

			.tl-heading h4 {
			  margin: 0;
			  color: rgba(40,40,40,1.00);
			}

			.tl-body p, .tl-body ul {
			  margin-bottom: 0;
			}

			.tl-body > p + p {
			  margin-top: 5px;
			}

			/** media queries **/
			@media (max-width: 991px) {
			  .timeline li .timeline-panel {
				width: 44%;
			  }
			}

			@media (max-width: 700px) {
			  .page-header h1 { font-size: 1.8em; }

			  ul.timeline:before {
				left: 40px;
			  }

			  .tldate { width: 140px; }

			  ul.timeline li .timeline-panel {
				width: calc(100% - 90px);
				width: -moz-calc(100% - 90px);
				width: -webkit-calc(100% - 90px);
			  }

			  ul.timeline li .tl-circ {
				top: 22px;
				left: 22px;
				margin-left: 0;

			  }
			  ul.timeline > li > .tldate {
				margin: 0;
			  }

			  ul.timeline > li > .timeline-panel {
				float: right;
			  }

			  ul.timeline > li > .timeline-panel:before {
				border-left-width: 0;
				border-right-width: 15px;
				left: -15px;
				right: auto;
			  }

			  ul.timeline > li > .timeline-panel:after {
				border-left-width: 0;
				border-right-width: 14px;
				left: -14px;
				right: auto;
			  }
			}
/*contact*/
			#contact{
				width: 60%;
				color: #282828;
				float: right;
				margin-right: 10%;
			}
			#contact .form-control {
			  display: block;
			  width: 100%;
			  height: 34px;
				margin-top:2px;
			  padding: 6px 12px;
			  font-size: 14px;
			  line-height: 1.42857143;
			  color: white;
			  background-color: rgba(0, 60, 70, .7);
			  background-image: none;
			border-radius:0px;

			  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
					  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
			  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
				   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
					  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
			}
			#contact textarea.form-control {
			  height: 30vh;
			}
			#contact .btn-default {
			margin-top:2px;
			  color: white;
			  background-color: rgba(0, 60, 70, .7);
			  border-color: dimgrey;
				border-radius:0px;
			}
/*projet*/
				#projets{
					position: relative;
					width: 100%;
				}
				#projetCont { 
					float: right;
					/*overflow: scroll; */
					width: 80%; 
					
					/*overflow-y: hidden;*/


				}
				/*	.container-outer::-webkit-scrollbar {
								width: 3px;
							}

							.container-outer::-webkit-scrollbar-track {*/
								/*box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
						/*	}

							.container-outer::-webkit-scrollbar-thumb {
							  background-color: #f8f0ee;
							  outline: 1px solid slategrey;
							}*/
				.container-inner { 
					
					 width: auto;
					
					overflow-x: scroll;
					overflow-y: hidden;
					white-space: nowrap;


				}
					.container-inner::-webkit-scrollbar {
								width: 3px;
							}

							.container-inner::-webkit-scrollbar-track {
								/*box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
							}

							.container-inner::-webkit-scrollbar-thumb {
							  background-color: #f8f0ee;
							  outline: 1px solid slategrey;
							}

						.projetCont {

							background-color: transparent;
							height: 100%;
							width: 100%;
							transition: all 0.2s; /* transition when the mouse over */
						}
						.projetCont:hover {
							background-color: rgba(204,204,204,0.58);
							width: 60vh;
							height: auto;


						}
						.projetCont:hover>.text_projet p{
							font-size: 1.2em;
						}
						.img_projet{
							height: 30vh;
							margin: 10px;
						}
						.text_projet p{ 

								width: auto;
								height: auto;					
								text-overflow: ellipsis;
								white-space: initial;
							font-size: 0.9em;

									}

/*.projetCont{
	position: relative;
	width: auto;
	height: 190;
	float: left;
}*/
/*p{
	position: relative;
	font-size: 20px;
}
*/
/*footer*/
							footer{
								position: fixed;
								left:0px;
									bottom:0px;
								   width:100%;
								text-align: center;
							}
/*page admin*/
				#contenu_admin{
					margin-top: 5%;
				}
				.modal-content {
				  position: relative;
				  background-color: rgba(37,36,36,0.90);
				  -webkit-background-clip: padding-box;
						  background-clip: padding-box;
				  border: 1px solid #999;
				  border: 1px solid rgba(0, 0, 0, .2);
				  border-radius: none;
				  outline: 0;
				  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
						  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
				}
#container_admin{
	background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);;
	
				background-size: auto 100% ;
				background-repeat: no-repeat;
				background-attachment:fixed;
				font-family: 'Oxygen', sans-serif;
				width: 100%;
				height: 100%;
				opacity: 1;
}
.table{
	background-color: white;
}
/*modal*/
				.modal-backdrop {
				  position: fixed;
				  top: 0;
				  right: 0;
				  bottom: 0;
				  left: 0;
				  z-index: 1040;
				  background-color: #000;
				}
				.modal-backdrop.fade {
				  filter: alpha(opacity=0);
				  opacity: 0;
				}
				.modal-backdrop.in {
				  filter: alpha(opacity=50);
				  opacity: .5;
				}
				.modal-header {
				  padding: 15px;
				  border-bottom: 1px solid #e5e5e5;
				}
				.modal-header .close {
				  margin-top: -2px;
				}
				.modal-title {
				  margin: 0;
				  line-height: 1.42857143;
				}
				.modal-body {
				  position: relative;
				  padding: 15px;
				}
				.modal-footer {
				  padding: 15px;
				  text-align: right;
				  border-top: 1px solid #e5e5e5;
				}
				.modal-footer .btn + .btn {
				  margin-bottom: 0;
				  margin-left: 5px;
				}
				.modal-footer .btn-group .btn + .btn {
				  margin-left: -1px;
				}
				.modal-footer .btn-block + .btn-block {
				  margin-left: 0;
				}
				.close {
				  float: right;
				  font-size: 21px;
				  font-weight: bold;
				  line-height: 1;
				  color: rgba(255,255,255,1.00);
				  text-shadow: 0 1px 0 #fff;  
				  opacity: .85;
				}
				.close:hover,
				.close:focus {
				  color: #000;
				  text-decoration: none;
				  cursor: pointer;
				  filter: alpha(opacity=50);
				  opacity: .5;
				}
				button.close {
				  -webkit-appearance: none;
				  padding: 0;
				  cursor: pointer;
				  background: transparent;
				  border: 0;
				}
				.modal .btn-default {
				margin-top:1%;
				  color: white;
				  background-color: rgba(0,0,0,0.5);
				  border-color: #ccc;
				}
				.modal .form-control {
				  display: block;
				  width: 100%;
				  height: 34px;

				  padding: 6px 12px;
				  font-size: 14px;
				  line-height: 1.42857143;
				  color: white;
				  background-color: rgba(0,0,0,0.5);
				  background-image: none;

				  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
						  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
				  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
					   -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
						  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
				}
				.modal .input-group{
					width: 50%;
					margin-left: 25%;
					margin-right: auto;
					margin-top: 2%;
				}
				.modal .input-group-addon{
				  padding: 6px 12px;
					width: 25%;
				  font-size: 14px;
				  font-weight: normal;
				  line-height: 1;
				  color:white;
				  text-align: center;
				  background-color: rgba(0,0,0,0.5);
				  border: none;
				  border-radius: none;
				border-color: #ccc;
				}
				.modal-footer .btn-default {
				margin-top:1%;
				  color: white;
				  background-color: rgba(0, 0, 0, .5);
				  border-color: #ccc;
				}
/*Video page*/
#video_cv{
	text-align: center;
	
}
#video_cv video{
	margin: 10%;
	width: 60%;
}
@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) {

/* Smartphones (portrait and landscape) ----------- */


            .fly-in-text li {
                display: inline-block;
               
                
                font-weight: 300;
                font-size: 7em;
               
                opacity: 1;
                transition: all 2.5s ease;
            }
                    
          
            .fly-in-nom li {
                display: inline-block;
                
              
                font-weight: 300;
                font-size: 7em;
              
                opacity: 1;
                transition: all 2.5s ease;
            }
		#center_text{

				width: 50%;
				margin: 15% auto auto auto;
				background-color:rgba(0,0,0,0.59);
			}
	#barre_naviga li{
				display: block;
				color: white;
				 font-weight: 300;
				 font-size: 6em;

				 opacity: 1;
				 transition: all 2.5s ease;
				margin: 13%;
				padding: 3%;
				text-shadow: 3px 0px 5px rgba(150, 150, 150, 1);
			}
.navbar-default .navbar-brand {
			
				font-size: 1.5em;
			
				
			}
		

			.navbar-default .navbar-nav > li > a {
		
				font-size: 1em;
			}
#timeline{
				padding-left: 0px;
				height: 100%;
				
				
			}
	#contact{
				width: 70%;
				
				float: none;
				margin:10%;
			}
	#projetCont { 
					float: none;
					
					width: 100%; 
				


				}
}