/* -------------------------------------- CORPS DES TEXTES -----------------------------------------------  */

body{
	background-color: #252525;
	color:#e6e6e6;
	margin:0;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	position: relative;
	/*min-height: 100%;*/
    background-image: url('sources/Yucca_02.png'); 
    background-repeat: repeat; 
    background-attachment: fixed; 

}

.body2{
	background-color:#e8e9e5;
	/* milieu */
	margin:auto;
	padding:50px;
	margin-top:70px;
	font-family: 'Roboto', sans-serif;
	color:#91ACBB;
}

.rightSized{
	min-width:900px;
	max-width:60%;
}

/* ---------------------------------------------- LIENS ------------------------------------------------------ */

a{
	color:#584d48;
	text-decoration:none;
	transition: color 0.4s;
}

/* noe laqueche titre */

a:hover{
	color:#ECC08A;
}

/* test */

a:active{
	color:#e89e9e;
}


a.current{

   
}

/* ---------------------------------------- NAVIGATION ------------------------------------------------ */ 

#navbg{
	top:0;
	left:0;
	width:100%;
	position:fixed;
	background-color:#DE8080;
	/* bandeau */
	z-index:1;
}

#navflex {
    display: -webkit-flex;
    display: flex;
	justify-content:space-between;
	flex-direction:row;
	min-width:900px;
	max-width:60%;
	margin:auto;
	padding:0px;
	
}
#navname{
	font-size:35px;
}
#navdot{
	font-weight:bold;
	font-size:100px;
	line-height:100px;
	margin:0px;
	padding:0;
}
#navtitle {
	font-size:25px;
	margin-left:15px;
	font-weight:300;
	color:#584d48;
	/* technical game designer */
	padding-top:17px;
	line-height:25px;
}

#navflex div{
	font-weight:300;
	letter-spacing:1px;
	color:#584d48;	
	/*
	margin-left:30px;
	padding-top:20px;
	line-height:50px;
	/* le gros point lol */
	*/
} 

#navlink{
	font-size:35px;
	padding-top:20px;
	padding-left:30px;
	text-transform:uppercase;	
}

#navlink a{
	color:#3C5360;
}

.m-contact{
	color:#584d48;
	line-height:20px;
	font-size:15px;
	
	/* les points du contact lol  */
}

.m-contact a{
	color:#584d48;
	/* mail et tout */
	font-family: 'Roboto Light', sans-serif;
	font-size:15px;
}

.m-contact a:hover{
	color:#ECC08A;
}



/* ------------------------------------------------ FOOTER ------------------------------------------------------------------------ */ 

footer {
	margin:0;
	text-align:center;
	padding-bottom:30px;
	font-size:13px;
	color:#82726A;
	text-shadow:0px 0px 3px black;
}


/* ------------------------------------------------ BLOCS & FLEXS ------------------------------------------------ */

.p-flex{
	display: -webkit-flex;
    display: flex;
    flex-flow: row;
	justify-content:space-between;
	/*
	margin-left:-30px;
*/
}

.p-flex-column{
	display:flex;
    display: -webkit-flex;
	flex-direction:column;
	flex-flow:wrap;
}


/* ------------------------------------------------ TITRES ---------------------------------------- */

p{
	text-align:justify;
	margin:0;
}

h2{
	font-size:20px;
	line-height:25px;
	text-transform:uppercase;
	font-weight:400;
	color:#584d48;
	margin:auto;
	
	/* looking for  */

}

h3{ 
	font-family: 'Roboto Light', sans-serif;
	margin:auto;
	font-weight:400;
	font-size:25px;
	color:#DE8080
	
	/* titres des jeux  */
}

h3:hover{
	color:#82B5A7;
	transition: color 0.4s;
}

h4{
	margin:auto;
	font-weight:bold;
	display:inline;
}


h5{ 
	font-family: 'Roboto', sans-serif;
	margin:auto;
	font-weight:400;
	font-size:50px;
	margin-left:40px;
	margin-bottom:10px;
	color:#DE8080
}

/*-------------------------------- GALERIES ------------------------ */


.indexinf {
	/* outline: 3px solid #DE8080; */
	outline: 2px solid #82B5A7;
	/* margin-top:8px; */
	padding: 10px;
	width:60%;
}

.title-card{
	
	margin-left:6px;
	/* 
		padding:5px 40px 5px 40px;
	*/
	transition: background-color 0.5s;
	font-size:25px;
	color:#82726A;
	font-weight:600;
	text-transform:uppercase;
	
	/* catégories */
}


.title-card span{
	border-bottom:5px solid #82726A
	
	/* souligne */
}

.title-card:hover{
	color:#82B5A7;
	/* hover catégories */
}

.title-card:hover span{
	border-bottom:5px solid #82B5A7;
	
	/* hover souligne */
}

.title-card-current{
	
	/* catégorie actuelle */
	
	background-color:#82726A;
	padding:5px 40px 5px 40px;
	transition: background-color 0.5s;
	font-size:25px;
	color:#e8e9e5;
	font-weight:600;
	text-transform:uppercase;
}

.title-card-current:hover{
	background-color:#82B5A7;
	transition: color 0s;
}

/* about me  */

.navres {
	color:#DE8080;
	display:inline;
}

.navres:hover {
	color:#e8e9e5;
	background-color:#DE8080;
}


.navres-current {
	color:#e8e9e5;
	background-color:#DE8080;
}

.titleabout {
	background-color:#82726A;
	color:#e8e9e5;
	margin-top:20px;
	padding:10px;
	font-size:15px;
	font-weight:600;
}


.subtitleabout{
	color:#82726A;
	/* text-transform:lowercase; */
	display:inline;
	font-weight:600;
	font-size:14px;
}

.cv{
	/* border:2px solid #0084d8; */
	/* color:#82726A; */
	
	text-transform:uppercase;
	font-weight:500;
	margin-top:10px;
	font-size:20px;
	line-height:32px;
}


.descabout {
	margin-top:30px;
	display: -webkit-flex;
    display: flex;
    flex-flow: row;
	text-align: justify;
}

.descabout div{

	width:50%
}

.gall-flex {
	display: -webkit-flex;
    display: flex;
    flex-flow: row;
	margin-top:40px;
}

.gall-flex h2 {
	color:black;
	font-weight:300
}


.gall-flex2 {
	display: -webkit-flex;
    display: flex;
    flex-flow: row;
}

.gall-card {
	background-color:#F3AB9E;
	margin:15px;
	margin-left:40px;
	margin-top:0px;
	font-size:13px;
	padding:15px;
	color:#82726A;
}

.gall-img{
	border:3px solid #DE8080;
}

.gall-img img{
	border:4px solid #e8e9e5;
}

.gall-desc {
	margin-left:25px;
	margin-top:5Px;
	color:#82726A;
	font-size:14px;
	line-height:20px;
	text-align:justify;
}

.gall-desc h3{
	margin-bottom:5px;
}

.gall-desc a{
	color:#DE8080;
}

.gall-desc a:hover{
	color:#82B5A7;
}

.gall-desc2 {
	margin-left:25px;
	margin-top:5Px;
	color:#82726A;
	font-size:15px;
	line-height:20px;
}

.gall-desc2 a {
	color:#DE8080;
}

.gall-desc2 a:hover {
	color:#ECC08A;
}

.desc {
	margin-top:20px;
	color:#82726A;
	font-size:15px;
	text-align:justify;
	display: -webkit-flex;
    display: flex;
	flex-flow:row;
	border-right: 2px solid;
}

.desc div{
	padding:30px;

	border-left: 2px solid;
}

/* ---------------------------------------- IMAGES 3D ----------------------------------------- */

.img1 {
	background-image:url('sources/bg_sq2400.jpg')
}
.img2 {
	background-image:url('sources/gall1.png')
}
.img3 {
	background-image:url('sources/gall2.png')
}
.img4 {
	background-image:url('sources/gall3.png')
}
.img5 {
	background-image:url('sources/gall4.png')
}
.img6 {
	background-image:url('sources/gall5.png')
}




/* ------------------------------------------------------------ COMMISSIONS ---------------------------------------------- */
.com-flex {
	display:flex;
    display: -webkit-flex;
	flex-direction:column;
}

.com-flex-child {
	display:flex;
    display: -webkit-flex;
	flex-direction:row;
}

.com-flex .com-flex-child img{
	margin:5px;
}

.com-flex-child h2 {
	color:black;
	font-weight:300;
	font-size:28px;
}

.com-flex p{
	width:650px;
}


/* ---------------------------------------- CV --------------------------------*/

.pres {
	width:20%;	
	margin:auto;
	text-align:right
}

.pres h1{
	line-height:50px;
}

.pres h2{
	font-size:25px;
	color:#292929;
	margin-top:-20px;
	font-weight:300;
	text-transform:none
}

.pres img{
	width:75px;
	margin:3px;
}


.cv-flex2{
	display: -webkit-flex;
    -webkit-flex-flow: row;
    display: flex;
    flex-flow: row;
}

.cv-flex2 div{
	padding:10px;
}

.cv-flex2 div:nth-of-type(1) {flex-grow: 1;}
.cv-flex2 div:nth-of-type(2) {flex-grow: 1;}
.cv-flex2 div:nth-of-type(3) {flex-grow: 3;}

.decocv{
	border-top:1px solid #292929;
	padding-top:6px;
}

.cv-flex{
	display:flex;
    display: -webkit-flex;
	flex-direction:row;
	flex-flow:row;
	margin-top:-100px;
}

.cv-flex .body2{
	width:25%;
	padding:40px;
	margin:25px;
	margin-top:100px;
}

.biography{
	padding:20px;
	padding-right:100px;
	padding-left:50px;
}



/* ------------------------------------------------------------------- PETITS ECRANS ------------------------------------------------------------------- */

@media screen and (max-width: 600px)
{
	/* .title-card{ */
		/* font-size:10px; */
	/* } */
}


/*-----------------------------------------------------------------SLIDESHOW------------------------------------------------------------------------------*/

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  /* margin: auto; */
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot-container {
	padding-top:10px;
	padding-left:33%;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

/* test */

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}