/* Votre Style */
html{
	overflow-x: hidden;
}
body {
	font-family: 'Comfortaa', cursive, Arial, serif; 
	font-weight: 400; 
	text-rendering: optimizeLegibility; 
	-webkit-font-smoothing: subpixel-antialiased;
	background: url(../img/bg_global.jpg) center top repeat #000000;
	
	overflow-x: hidden;
	}

/* HEADER */
#warning{
	text-align:center;
	background-color: black;
	border-bottom: 2px solid white;
	padding: 20px;
	line-height: 1.5;
	font-size: 18px;
}

#header{
	background: none repeat scroll 0 0 #222324;
    color: #FFFFFF;
    font-size: 1.2rem;
    height: 40px;
    letter-spacing: 0.3em;
	position: fixed;
    text-align: center;
    box-shadow: 0 0 5px #111111;
	padding-top: 12px;
    width: 100%;
    z-index: 9999;	
	
}

#diago-header{
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid rgba(0, 0, 0, 0);
    border-left: 120rem solid #222324;
	position: relative;
	top: -30px;
	z-index: -1;
	
	-moz-transform: scale(.9999);
}

#skills, #portfolio {
	padding: 35px 0 50px 0;	
	}

/* ABOUT */	
#about{
	/*background: url(../img/bg_about.png) center 40px no-repeat transparent;*/
	padding-top: 85px;
}

.txtAbout{
	text-align: center;
	padding-top: 40px;
	font-size: 1.3rem;
	line-height: 1.6rem;
}

.animated { 
    -webkit-animation-duration: 3s; 
    animation-duration: 3s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes bounceInDown { 
   0% { 
       opacity: 0; 
        -webkit-transform: translateY(-2000px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateY(30px); 
    } 
    80% { 
        -webkit-transform: translateY(-10px); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-2000px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateY(30px); 
    } 
    80% { 
        transform: translateY(-10px); 
    } 
    100% { 
        transform: translateY(0); 
    } 
} 

.bounceInDown { 
    -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown; 
}


.centerLink{
	max-width: 29.9rem;
}

/* PORTFOLIO */
/*#portfolio{
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #2F4357),
		color-stop(1, #1F2F40)
	);
	background-image: -o-linear-gradient(bottom, #2F4357 0%, #1F2F40 100%);
	background-image: -moz-linear-gradient(bottom, #2F4357 0%, #1F2F40 100%);
	background-image: -webkit-linear-gradient(bottom, #2F4357 0%, #1F2F40 100%);
	background-image: -ms-linear-gradient(bottom, #2F4357 0%, #1F2F40 100%);
	background-image: linear-gradient(to bottom, #2F4357 0%, #1F2F40 100%);
}*/

#diago-top-portfolio{
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid rgba(169,64,3, 1);
    border-left: 120rem solid rgba(0, 0, 0, 0);
	
	-moz-transform: scale(.9999);
	}
	
#diago-top-game{
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid rgba(230,96, 16, 1);
    border-left: 120rem solid rgba(169,64,3, 1);
	
	position: relative;
    top: -42px;
	
	-moz-transform: scale(.9999);
	
	-webkit-backface-visibility: hidden;
	}

#game{
	background-color: rgba(230,96, 18, 1);
	position: relative;
    top: -42px;
	}	
	
#diago-top-elearning{
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #eb7531;
    border-left: 120rem solid rgba(230,96, 16, 1);
	padding-top: 30px;
	
	position: relative;
    top: -42px;
	z-index: 2;
	
	-moz-transform: scale(.9999);
	
	-webkit-backface-visibility: hidden;
	}
	
#elearning{
	background-color: #eb7531;
	position: relative;
    top: -43px;
	}
	
#diago-top-webdesign{
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #ed874b;
    border-left: 120rem solid #EB7531;
	padding-top: 30px;
	
	position: relative;
    top: -44px;
	z-index: 2;
	
	-moz-transform: scale(.9999);
	}
	
#webdesign{
	background-color: #ed874b;
	position: relative;
    top: -44px;
	}

#diago-top-3d{
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #f09967;
    border-left: 120rem solid #ed874b;
	padding-top: 30px;
	
	position: relative;
    top: -45px;
	z-index: 2;
	
	-moz-transform: scale(.9999);
	}
	
#render3d{
	position: relative;
    top: -45px;
	background-color: #f09967;}	
	
#diago-top-illustration{
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #f9b086;
    border-left: 120rem solid #f09967;
	padding-top: 30px;
	
	position: relative;
    top: -46px;
	z-index: 2;
	
	-moz-transform: scale(.9999);
	}
	
#illustration{
	position: relative;
    top: -46px;
	background-color: #f9b086;}	
	
	
	
.titlePortfolio{
	text-align: left;
	color: white;
	font-weight: 700;
	font-size: 2.5rem;
	margin-left: 15px;
	position: relative;
	z-index: 5;
}

.titleSection{
	height: 70px;
	text-align: center;
	color: white;
	font-weight: 400;
	font-size: 1.7rem;
}

.carousel{
	margin: 35px 0;
}

/*carousel portfolio */
/*.img-circle {
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	border-radius: 500px;
	background-color: #000000;
    display: inline;
    height: 20px;
    width: 20px;
}*/

.viewSmall {
    width: 155px;
    height: 198px;
}
.viewMedium {
    width: 330px;
    height: 198px;
}
.viewBig {
    width: 505px;
    height: 198px;
}

.viewSmall, .viewMedium, .viewBig  {
    overflow: hidden;
    position: relative;
    text-align: center;
	float: left;
	margin: 0.9%;
	}
	
.viewBig .mask, .viewBig .content {
    width: 505px;
    height: 198px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.viewMedium .mask, .viewBig .content {
    width: 330px;
    height: 198px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.viewSmall .mask, .viewBig .content {
    width: 155px;
    height: 198px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.viewBig img , .viewMedium img, .viewSmall img{
    display: block;
    position: relative;
}
.viewBig h2 ,  .viewMedium h2{    
	font-weight: 700;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 1.8rem;	
	line-height: 1;
    padding: 5px;
    margin: 20px 0 0 0;
	line-height: 1.5;
}

 .viewSmall h2{    
	font-weight: 700;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 1.4rem;
	line-height: 1.2;
    padding: 5px;
    margin: 10px 0 0 0;
}
.viewBig p{
    font-size: 1.3rem;
    position: relative;
    color: #fff;
    text-align: center;
}

 .viewMedium p, .viewSmall p {
    font-size: 1.2rem;
    position: relative;
    color: #fff;
    text-align: center;
	line-height: 1.2;
}

.view-sixth img {
   -webkit-transition: all 0.4s ease-in-out 0.5s;
   -moz-transition: all 0.4s ease-in-out 0.5s;
   -o-transition: all 0.4s ease-in-out 0.5s;
   -ms-transition: all 0.4s ease-in-out 0.5s;
   transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
   background-color: rgba(169,65,3,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-in 0.4s;
   -moz-transition: all 0.3s ease-in 0.4s;
   -o-transition: all 0.3s ease-in 0.4s;
   -ms-transition: all 0.3s ease-in 0.4s;
   transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 2px solid white;
   background: transparent;
   margin: 45px 20px 4px 20px;
   line-height: 1;
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -webkit-transition: all 0.3s ease-in-out 0.2s;
   -moz-transition: all 0.3s ease-in-out 0.2s;
   -o-transition: all 0.3s ease-in-out 0.2s;
   -ms-transition: all 0.3s ease-in-out 0.2s;
   transition: all 0.3s ease-in-out 0.2s;
}

.view-sixth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
  /* border: 1px solid black;*/
}
.view-sixth:hover img {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-sixth:hover h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-sixth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}	

.imgCaroussel-medium{
	float: left;
    margin: 10px;
    text-align: center;
	}

/*SKILLS */
#skills{
	background-color : #43a4ab;
	text-align: center;
	color: #ffffff;
}

#diago-top-skills{ 
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #065d66;
    border-left: 120rem solid #f9b086;
	padding-top: 30px;
	
	position: relative;
    top: -47px;
	z-index: 4;
	
	
	-moz-transform: scale(.9999);
	
	-webkit-backface-visibility: hidden;
	}
	
.titleSkills{
	text-align: left;
	color: white;
	font-weight: 700;
	font-size: 2.5rem;
	margin-left: 25px;
	padding-top: 8px;
	position: relative;
	top: -80px;
	z-index: 5;
}

.imgSkills{
	top: -140px;
}

#diago-top-radarChart{ 
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #43a4ab;
    border-left: 120rem solid #065d66;
	padding-top: 30px;
	
	position: relative;
	top: -140px;
	z-index: 1;
	
	-moz-transform: scale(.9999);
	}

/*CONTACT */ 
#contact, #footer{
	background-color: #dd4739;
	position: relative;
    top: -260px;
	text-align: center;
	color: #ffffff;
}

.centerSocial{
	max-width: 19rem;
	position: relative;
    top: -50px;
}

.titleContact{
	text-align: left;
	color: white;
	font-weight: 700;
	font-size: 2.5rem;
	margin-left: 15px;
	padding-top: 8px;	
	position: relative;
	top: -186px;
	z-index: 5;
}

.textForm{
	text-align: center;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.3;
}

#diago-top-contact{ 
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #b32114;
    border-left: 120rem solid #43A4AB;
	padding-top: 30px;
	
	position: relative;
	top: -180px;
	z-index: 2;
	
	-moz-transform: scale(.9999);
	}
	
#diago-top-form{ 
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid #DD4739;
    border-left: 120rem solid #B32114;
	padding-top: 30px;
	
	position: relative;
	top: -255px;
	z-index: 1;
	
	-moz-transform: scale(.9999);
	}
	
#diago-bottom{ 
	width: 100%; 
	height: 0; 
	border-bottom: 80px solid rgba(0, 0, 0, 0);
    border-left: 120rem solid #DD4739;
	padding-top: 30px;
	
	position: relative;
	top: -260px;
	z-index: 1;
	
	-moz-transform: scale(.9999);
	}

.facebook , .twitter, .mail , .linkedin, .behance{
	width: 50px;
	height: 50px;
	display: block;
	margin-top: 42px;
}

.facebook:link{
	background: url(../img/facebook.png) top center no-repeat transparent;
}

.facebook:hover{
	background: url(../img/facebook_hover.png) top center no-repeat transparent;
}

.twitter:link{
	background: url(../img/twitter.png) top center no-repeat transparent;
	}

.twitter:hover{
	background: url(../img/twitter_hover.png) top center no-repeat transparent;
	}	
	
.behance:link{
	background: url(../img/behance.png) top center no-repeat transparent;
	}
	
.behance:hover{
	background: url(../img/behance_hover.png) top center no-repeat transparent;
	}

.linkedin:link{
	background: url(../img/linkedin.png) top center no-repeat transparent;
	}
	
.linkedin:hover{
	background: url(../img/linkedin_hover.png) top center no-repeat transparent;
	}


.mail:link{
	background: url(../img/mail.png) top center no-repeat transparent;
	}
	
.mail:hover{
	background: url(../img/mail_hover.png) top center no-repeat transparent;
	}
	
/*ANCOR */
#titlePortfolio {
	position:relative;
	top: -114px;
}

#titleSkills {
	position:relative;
	top: -156px;
	}
	
#titleContact {
	position:relative;
	top: -286px;
}


/*common*/
.clearBoth{clear:both;}

.Hoffset23R{
	margin-left: 23px;}
	
.Vpadding20{
	padding-top: 20px;
}
	
.Vpadding20R{
	padding-bottom: 20px;
}

.show-for-1000-down{
	display: none;
}

@media only screen and (max-width: 1100px){
.show-for-1000-up{
	display: none;
}

.show-for-1000-down{
	display: block;
	text-align:center;
	color: white;
}
.titleContact{
	top: -176px;
	}
	
	.imgPortfolio{
	margin: 0 15px;
	padding-bottom: 20px;
	}
}

@media only screen and (min-width: 40.063em) and (max-width: 64em){
p{
	font-size: 0.9rem;
}

h2{
	font-size: 1.6rem;
}

.titlePortfolio{	
	top: 10px;
}

.titleSkills {
    top: -70px;}
	


.portfolio_mobile {
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.portfolioImg{
	float: left;
	width: 340px;
	margin: 10px 5% 10px 5%;
	}

 .portfolioTxt{
	float: left;
	/*width: 50%;*/
	margin: 10px 5% 10px 5%;
}

}
	
@media only screen and (max-width: 40em) {
	body {
	background: url(../img/bg_global-mobile.jpg) center top repeat #000000;
	}
	
	.show-for-1000-up, .show-for-1000-down{
	display: none;
}
	
	#header{
    /*height: 50px;	*/
}

	#about{
		padding-top: 0;
		background: none;
	}
	
	.txtIntro{
	text-align: center;
	padding-top: 0;
	font-size: 1.3rem;
	line-height: 1.6rem;
}

	/*Portfolio*/
	.titlePortfolio, .titleSkills, .titleContact{
	text-align:  center;
	margin: 10px 0 0 0;
	font-size: 1.8rem;
	padding: 0;
}

	.titleSection{
	position: relative;
	z-index: 5;
	margin-top: 15px;
	}
	
	#game, #elearning, #webdesign, #render3d, #illustration{
	text-align: center;
	color: white;
	z-index:5;
	}
	
	#game{
	top: -32px;
	}
	
	#elearning{
	top:-87px;
	}
	
	#webdesign{
	top: -132px;
	}
	
	#render3d{
	top:-150px;
	}
	
	#illustration{
	top: -177px;}
	
	#diago-top-elearning, #diago-top-webdesign, #diago-top-illustration, #diago-top-3d{
	padding: 0;
	}
	
	#diago-top-elearning{
	top:-85px;
	}
	
	#diago-top-webdesign{
	top:-128px;
	}
	
	#diago-top-3d{
		top: -150px;
	}
	
	#diago-top-illustration{
	top: -175px;}
	
	#diago-top-skills{
	top: -230px;}
	
	.carousel{
		margin: 20px 0;
	}
	

	
	
	
	#diago-top-portfolio{
	border-bottom: 65px solid rgba(169,64,3, 1);
    border-left: 100rem solid rgba(0, 0, 0, 0);
	position: relative;
	top: 2px;
	}
	
	#diago-top-game{
		border-bottom: 65px solid rgba(230,96, 16, 1);
		border-left: 100rem solid rgba(169,64,3, 1);
		z-index: 1;
		top: -30px;
	}

	#diago-top-radarChart{
	top: -345px;
	border-bottom: 80px solid rgba(0, 0, 0, 0);
	}
	
	#skills{
	background: none;
	}
	
	.imgSkills{
	top: -340px;
}

	.titleSkills{
	top: -268px;
	}

	#diago-top-contact{
	 border-left: 120rem solid rgba(0, 0, 0, 0);
	 top: -440px;}

	#contact, #footer{
	top:-485px;
		}
		
	#diago-top-form{
	padding:0;
	top: -480px;
	}
	
	.titleContact{
	top: -438px;
	}
		
	.textForm{
		margin-top: 15px;
		font-size: 1.3rem;
	}

.name-field, .email-field{
	padding: 0 0.9375em;
}
	
	#diago-bottom{
	top:-488px;
	}
	

	
}