.portfolio_1
{
	-webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    -moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
   	-o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
	display:block;
	width:70%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:70px;
}

.portfolio_2
{
	-webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    -moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    -o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
	display:block;
	width:40%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:70px;
}

.cynpano {
    -webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    -moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
   	-o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
	display:block;
	width:70%;
	height:700px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:70px;
    }

@media(max-width:1000px){
    .cynpano{
    	width:75%;
    	height:450px;
	}
}

@media(max-width:675px){
	.cynpano{
		width:95%;
	}
} 
.comments{
	width:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:150px;
}

h3{
	font-family:"nexa";
}

.texte_projet
{
	display:block;
	font-family:"nexa";
	font-size:1em;
	margin-left:35%;
	width:30%;
	height:auto;
}

.titre_projet
{
	display:block;
	font-family:"roboto";
	width:auto;
	margin-left:15%;
	height:auto;
	font-size: 5em;
	padding-left:7px;
	background-color:#b8cfea;
}


.texte_projet_lien
{
	display:block;
	font-family:"nexa";
	margin-left:35%;
	width:30%;
	height:auto;
	text-decoration:underline;
}

.snapshot
{
	-webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    -moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    -o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
	display:block;
	width:16.6%;
	height:auto;
	float:left;
	opacity:1.0;
	-webkit-backface-visibility: hidden;
	padding-right:0;
	padding-left:0;
	margin-right:0;
	margin-left:0;
}

.mosaique_6{
	width:100%;
	padding:0;
	margin:0;
	padding-bottom:150px;
}


.snapshot:hover
{
	opacity:0.5;
	//filter:alpha(opacity=50);
	transition: 0.5s;
}

p{
	font-family:"nexa";
}

@media(max-width:1000px){
	.portfolio_1{
		-webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
		width:75%;
	}
	.portfolio_2{
		-webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
		width:70%;
	}
	.comments{
		-webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
		width:75%;
	}
	.titre_projet{
		font-size:4em;
	}
	.texte_projet{
		width:50%;
		margin-left:30%;
	}
	.texte_projet_lien{
		width:40%
	}
	.snapshot{
		-webkit-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-moz-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	-o-transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	transition:width 500ms ease-in-out, height 500ms ease-in-out, -webkit-transform 1s;
    	padding:1%;
		width:30.5%;
	}
	.mosaique_6{
		width:90%;
		margin-left:auto;
		margin-right:auto;
	}
}

@media(max-width:675px){
	.titre_projet{
		font-size:2em;
	}
	.texte_projet{
		width:70%;
		margin-left:15%;
	}
	.portfolio_1{
		width:95%;
	}
	.portfolio_2{
		width:95%;
	}
	.texte_projet{
		font-size:.8em;
	}
}

#HCB_comment_box blockquote {
    font-family:"nexa";
    background-color:rgb(235,235,235);
    padding:10px;
  }
  
#HCB_comment_box .date {
    font-family:"nexa";
    color:rgb(100,100,100);
  }
  
#HCB_comment_box .author {
    font-family:"nexa";
    color:rgb(100,100,100);
  }
  
#HCB_comment_box .author-name {
    font-family:"nexa";
    color:black;
  }
  

.portfolio_video
{
	display:block;
	width:712px;
	max-width:80%;
	min-width:400px;
	height:400px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:70px;
}

.legende
{
	text-align:center;
	font-family:"nexa";
	text-decoration:none;
}

.legende_underline
{
	text-align:center;
	font-family:"nexa";
	text-decoration:underline;
}

.scrollup {
  width: 44px;
  height: 44px;
  opacity: 1;
  position: fixed;
  bottom: 100px;
  right: 50px;
  display: none;
  text-indent: -9999px;
  background:url('portfolio/backtotop.png');
  /*background: url('backtotop.png') no-repeat;*/
}

@font-face
{
	font-family: "roboto";
    src: url('../fonts/Roboto-Black.ttf');
    font-style:normal;
}