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

/****************************************************global*/

*{
margin: 0;
padding:0;
/*font-family: 'Roboto', sans-serif;*/
font-family: 'Unica One', sans-serif;
font-wheight:thin;
text-align:center;
text-decoration:none;
}

a:hover{
	text-decoration:none !important; 
}

.coucou,
.cblocked{
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	background-image: url("images/jeremy-moisset-illustrateur-infographiste-webdesigner-chambery-grenoble.jpg");
	background-position: center;
	background-size: cover;
	border-radius: 100%;
	transition: all ease 1s;
	transition-delay: 0.2s;
	z-index: 20000;
}

.cblocked{
	background-image: url("images/jeremy-moisset-muted.jpg") !important;
}
.cblocked .bulle{
	display: none !important;
}

.coucou:hover,
.coucouhover{
	width: 70px;
	height: 70px;
	transition: all ease 0.3s;
	background-image: url("images/jeremy-moisset-illustrateur-infographiste-webdesigner-chambery-grenoble2.jpg");
	transition: all ease 1s;
	transition-delay: 0.2s;
}
.coucou .bulle{
	padding: 1em;
	background: white;
	position: absolute;
		right: 100px;
	width: 200px;
	top:0;
  display: none;
  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.21);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.21);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.21);
}

.coucou .bulle:before{
	content: '';
  width: 0; 
  height: 0; 
  position: absolute;
  right: -15px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  
  border-left: 15px solid white;
}

.mutemoi{
	background: white;
width: 18px;
height: 18px;
border-radius: 100%;
position: fixed;
bottom: 30px;
right: 17px;
cursor: pointer;
z-index: 50000;
padding: 2px;
font-size: 12px;
}

.coucou:hover .bulle,
.coucoubullehover{
	display: inline !important;
}


#videoheader{
	 position: fixed;
    top: 30%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    /*
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
 */
  background-size: cover;
  transition: 1s opacity;
}

#videoheader-small{
	 position: fixed;
    top: 30%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-75%);
    /*
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
 */
  background-size: cover;
  transition: 1s opacity;

}

header {
	background: #0000004d; 
}

header .title{
font-size:40px;
text-transform: uppercase;
color:white !important;
/*color: white;*/
text-align:center;
margin-top:4em !important; 
}

header a,
header a:hover,
header a:active{
	display: inline-block;
	margin: 0 0.5em;
	color: white;
}

/*
header a:nth-child(2){
	color: #ED8138 !important;
}
header a:nth-child(3){
	color: #A456A1 !important;
}
header a:nth-child(4){
	color: #D73331 !important;
}
header a:nth-child(5){
	color: #DEA726 !important;
}
*/

h1{
font-size:30px;
text-transform: uppercase;
text-align:center;
}


h2{
margin-top:0px !important; 
text-align:center;
font-size:15px !important;
text-transform: capitalize;
}

h3 {
font-size:2em;
text-transform: capitalize;
color:white;
}

h4{
text-align:center;
font-size:30px;
text-transform: capitalize;

}

/*liens + dans lightbox*/
h5{
margin: 20px;
font-size: 1.5em !important;
font-weight: capitalize !important;
color:#fff !important;
}


/*
#infographie h5{
	color:#ad749a !important;
}
#web h5{
	color:#ed5743 !important;
}
#illustration h5{
	color:#f3a13a !important;
}9*/

h5 a{
color:#f3a13a;
}
h5 a:hover{
color:white;
}

.citation{
	/*font-family: roboto sans-serif;*/
	font-family: 'Unica One', cursive;
	font-size: 2em;
	font-weight: italic;
	/*margin:0 30px;
	margin: 30px 0;*/
}

.linkall{
	margin-bottom: 20px
}
	
.loader{
	background: url(images/images/splashscreen.gif) no-repeat;
}

/***********************************************************************fin du global*/
/******************************aside****general**************************/
aside  #general_nav_left{
	position:fixed;
	left:50px;
	top:100px;
	z-index:2000;
	border-radius:10px;
	/*background:rgba(255, 255, 255, 1);*/
	opacity:0.3;
}

aside #general_nav_left:hover {
	opacity:1;
	transition: all ease  0.5s;
}


aside #general_nav_left ul a{
	display:block;
	margin-left:20px;
	padding:0;
	width:50px;
	height:50px;
	background:white;
	list-style:none;
	/*opacity:0.3;*/
	transition: all ease 0.2s;
}

aside #general_nav_left ul a:hover{
	display:block;
	margin-left:0;
	padding:0;
	width:100px;
	height:100px;
	list-style:none;
/*	opacity:1;
	transition: all ease  0.5s;*/
}



/*-------------pour le mouv-----------------------*/


aside #general_nav_left ul a:nth-child(1){
	background: url(images/laptop_circle.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(1):hover{
	background: url(images/laptop.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(2){
	
	background: url(images/web_circle.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(2):hover{
	
	background: url(images/web.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(3){
	background: url(images/brush_circle.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(3):hover{
	background: url(images/brush.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(4){
	background: url(images/hammer_circle.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(4):hover{
	background: url(images/camera.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(5){
	background: url(images/contact.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left ul a:nth-child(5):hover{
	background: url(images/envelope.png) no-repeat;
	background-size:contain;
}

/*---------------menu general repsonsive-------------------*/


aside #general_nav_left_resp ul a{
	border-radius: 0px;
    display: block;
    height: 0px;
    width: 0px;
    list-style: outside none none;
    margin-right: 20px;
    margin-top: 20px;
    padding: 0;
  transition: all 0.2s ease 0s;
    z-index: 20000000;


-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.21);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.21);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.21);

/*position: relative;*/

}


aside #general_nav_left_resp ul a:nth-child(1){
	background: url(images/book-resp.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left_resp ul a:nth-child(2){
	background: url(images/laptop-resp.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left_resp ul a:nth-child(3){
	
	background: url(images/web-resp.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left_resp ul a:nth-child(4){
	background: url(images/brush-resp.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left_resp ul a:nth-child(5){
	background: url(images/camera-resp.png) no-repeat;
	background-size:contain;
}
aside #general_nav_left_resp ul a:nth-child(6){
	background: url(images/envelope-resp.png) no-repeat;
	background-size:contain;
}
#general_nav_left_resp{
display: none;
position: fixed;
top: 20px;
/*right: -80px;*/
right: -50px;
transition: all 0.2s ease 0s;
 z-index: 2000000;
}
#btn_general_nav_left_resp{
display: none !important;
width:30px;
height: 30px;
border-radius:30px;
background:#FFF;
position:fixed;
right: 20px;
top: 20px;
z-index: 20000000;
transition: all 0.2s ease 0s;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.21);
-moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.21);
box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.21);
/*font-size: 10em;
line-height: 50%;
cursor: pointer;*/
}



/***********************************************************************fin du aside*/


/********************Global section************************/


header, footer{
	height:51.5em;
	width:auto;
	position: relative;
	text-align:center;
}

header nav{
	margin-bottom: 14em;
}

#lastproject{
	
}
#lastproject div{
	height: 10em;
	opacity: 0.6;
	transition: all ease 0.5s;
	background-size: cover !important;
}
#lastproject div:hover{
	opacity: 1;
	transition: all ease 0.5s;
}
#lastproject .golfstream{
	background: url("images/lastproject/golfstream.jpg") no-repeat;
}
#lastproject .nikoumouk{
	background: url("images/lastproject/nikoumouk.jpg") no-repeat;
}
#lastproject .myopencity{
	background: url("images/lastproject/moc.jpg") no-repeat;
}
#lastproject .lespierrettes{
	background: url("images/lastproject/lespierrettes.png") no-repeat;
}
#lastproject .dbtribe{
	background: url("images/lastproject/dbtribe.jpg") no-repeat;
}
#lastproject .propellet{
	background: url("images/lastproject/propellet.jpg") no-repeat;
}



.margintopcontent{
	/*margin-top: -100px;*/
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 6em;
	
}

/*les pictos d'en-tête*/
.pictoentet{
	height:100px;
	width:100px;
	/*position:relative;
	top:0px;*/
	/*left: 40%;*/
	margin: 0 auto;
	z-index:200;
	text-align:center;
}

/*general sur les fonds */
#about
{
	min-height: 520px;

	padding-top:100px;
	padding-bottom:100px;
	background:#f5f5f5;
	/*background:#c3ffb9;*/
	/*background:-webkit-radial-gradient(#afc847, #78c043);
	background:-moz-radial-gradient(#afc847, #78c043);
	 background: url(images/bg-pixel-vert.png) repeat;
	*/
}
#about article h4{
	color:#467027; !important;
}

#parcours
{

	min-height: 620px;
	background:#f5f5f5;
	/*background:#dbe6ed;*/
	/*background:-webkit-radial-gradient(#787bb2, #4a57a6);
	background:-moz-radial-gradient(#787bb2, #4a57a6);
	background: url(images/bg-pixel-bleu.png) repeat;
	*/
	color:#4a57a6;
}
#parcours article h4{
	color:#212763 !important;
}

#intro
{
	height: 150px;
	background:#f5f5f5;
	/*background:#e9d0e0;*/
   /*	background: -webkit-radial-gradient(#ad749a, #aa5290);
    background:-moz-radial-gradient(#ad749a, #aa5290);
    background: url(images/bg-pixel-violet.png) repeat;
    */

}

#infographie
{
	background:#f5f5f5;
	/*background:#e9d0e0;*/
   /*	background: -webkit-radial-gradient(#ad749a, #aa5290);
    background:-moz-radial-gradient(#ad749a, #aa5290);
    background: url(images/bg-pixel-violet.png) repeat;
    */

}
#web
{
	background:#f5f5f5;
	/*background:#efc4bf;*/
	/*background:-webkit-radial-gradient(#ed5743, #d63331);
	background:-moz-radial-gradient(#ed5743, #d63331);
	background: url(images/bg-pixel-rouge.png) repeat;*/
}
#illustration
{
	background:#f5f5f5;
	/*background:#efd3b0;*/
	/*background:-webkit-radial-gradient(#f3a13a, #ee8138);
	background:-moz-radial-gradient(#f3a13a, #ee8138);
	background: url(images/bg-pixel-orange.png) repeat;*/
}
#motion
{
	background:#f5f5f5;
	/*background:#f2eab2;*/
	/*background:-webkit-radial-gradient(#ddcc4a, #dea726);
	background:-moz-radial-gradient(#ddcc4a, #dea726);
	background: url(images/bg-pixel-jaune.png) repeat;*/
}
#logiciels
{
	min-height: 560px;

	background:#f5f5f5;
	/*background:#deeab0;*/
	/*background:-webkit-radial-gradient(#afc847, #78c043);
	background:-moz-radial-gradient(#afc847, #78c043);
	background: url(images/bg-pixel-vert.png) repeat;*/
}

#loisirs
{	
		background: url(images/loisirs/indonesie.jpg) repeat;
		background-size: cover !important;
}

#loisirs-jeu
{	
		background: url(images/loisirs/voie_lactee.jpg) repeat;
		background-size: cover !important;
}

#design
{	
		background: lightgrey;
}

#details{  
position: relative;
bottom:-50px;
width:100%;
height:20px;
text-align :center;
}

/*-----------------------parcours----------------------*/

.bloc_parcours{
	display: block;
	margin: 0 auto;
	width:200px;
	height:200px;
	overflow: hidden;
	border-radius: 200px;
transition: all ease-out 0.4s;
}
.bloc_parcours:hover{
	width:220px;
	height:220px;
	border-radius: 220px;
	transition: all ease-out 0.4s;
}

#ennavi{
	background: url(images/bt_enaai.png) no-repeat;
	background-size:100%;
}
#ap{
	background: url(images/bg_logo_apformation.png) no-repeat;
	background-size:100%;
}
#agence{
	background: url(images/agence.png) no-repeat;
	background-size:100%;
}
#melanie{
	background: url(images/melanie.png) no-repeat;
	background-size:100%;
}
#startup{
	background: url(images/startup.png) no-repeat;
	background-size:100%;
}
#dbtribe{
	background: url(images/dbtribe.png) no-repeat;
	background-size:100%;
}
#equivote{
	background: url(images/equivote.png) no-repeat;
	background-size:100%;
}


/***********************************************************************fin du global section*/

.project{
	display: inline-block;
	 margin: 5px;
	background-color: #FFF;
	overflow: hidden;
	   	background-position: center !important;
	   	transition: all ease 1s;
	/*border-radius: 15px;*/
/*-webkit-box-shadow: 0px 0px 300px 26px rgba(255,255,255,0.5);
-moz-box-shadow: 0px 0px 300px 26px rgba(255,255,255,0.5);
box-shadow: 0px 0px 300px 26px rgba(255,255,255,0.5);*/
}
   
.taillecarre1{
	width:150px;
	height:150px;
}
.taillecarre2{
	width:200px;
	height:200px;
}
.taillecarre3{
	width:250px;
	height:250px;
}
.taillerectangleh1{
	width:150px;
	height:250px;
}
.taillerectangleh2{
	width:200px;
	height:400px;
}
.taillerectangleh3{
	width:250px;
	height:450px;
}
.taillerectanglev1{
	height:150px;
	width:250px;
}
.taillerectanglev2{
	height:200px;
	width:400px;
}
.taillecarrev3{
	height:250px;
	width:450px;
}

.taillerectangle{
	width: 97%;
	height: 250px;
	margin: 0 1%;
}

.popup
{
	width: 100%;
	height: 100%;
	position:relative;
	padding: 20px;
	padding-top: 40px;
	transition: all ease 1s;
	color:#FFF;
	/*border-radius: 15px;*/
	background-color: rgba(66, 63, 60, 0.7);

		top: 0%;
		opacity: 0;
}

@-webkit-keyframes animeye{
    from {padding: 0px 0px; border-radius: 0px;}
    to {padding: 10px 15px; border-radius: 50px;}
}
@keyframes animeye {
    from {padding: 0px 0px; border-radius: 0px;}
    to {padding: 10px 15px; border-radius: 50px;}
}

.popup span{
	color:#FFF;
	list-style: none;
 transition: all ease 1s;
 vertical-align: center;
	padding: 0px 0px;
	border-radius: 0px;
	-webkit-animation-name: animeye; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
   	animation-name: animeye;
    animation-duration: 1s;
    animation-delay: 2.8s;
    opacity: 0;
	animation: all ease 1s;
	font-size:16px;
}

.popup:hover span{
	opacity: 1;
	color:#FFF;
	list-style: none;
 transition: all ease 0.3s;
 padding: 8px 8px;
 border-radius: 20px;
 animation: all ease 1s;
	transition-delay: 3s;
}
#parcours .popup:hover span{
	background: #4B57A6;
	transition-delay: 2.5s;
}
#infographie .popup:hover span{
	background: #aa5290;
	transition-delay: 2.5s;
}
#illustration .popup:hover span{
	background: #ee8138;
	transition-delay: 2.5s;
}
#web .popup:hover span{
	background: #FF3333;
	transition-delay: 2.5s;
}
#motion .popup:hover span{
	background: #ffdb5e;
	transition-delay: 2.5s;
}

#infographie a,
#infographie h1,
#infographie h3,
#infographie h5,
#infographie .popup h5{
	color: rgb(255, 104, 237) !important;
}
#illustration a,
#illustration h1,
#illustration h3,
#illustration h5,
#illustration .popup h5{
	color: rgba(243, 161, 48, 1) !important;
}
#web a,
#web h1,
#web h3,
#web h5,
#web .popup h5{
	color: rgb(255, 92, 65) !important;
}

#motion a,
#motion h1,
#motion h3,
#motion h5,
#motion .popup h5{
	color: #ffdb5e !important;
}




.project:hover{
   	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
   	background-size: 110% !important;
   	transition: all ease 1s;
   	background-blend-mode: overlay;
}
 

.project:hover .popup{
   	position:relative;
	top: 0%;
	opacity: 1;
}






/*------content infographie-------*/
#ligue{
	background: url(images/infographie/affiche/affiche-ligue-des-droits-delhomme-toulouse-en-libertes.jpg) no-repeat;
	background-size:100%;
}
#ligue:hover{
	background: url(images/infographie/affiche/affiche-ligue-des-droits-delhomme-toulouse-en-libertes2.jpg) no-repeat;
}
#auto{
	background: url(images/infographie/logo/logo-auto-ecole.jpg) no-repeat;
	background-size:100%;
}
#auto:hover{
	background: url(images/infographie/logo/logo-auto-ecole2.jpg) no-repeat;
}
#unesco{
	background: url(images/infographie/affiche/affiche-unesco-2.jpg) no-repeat;
	background-size:100%;
}
#mariage{
	background: url(images/infographie/mise-en-page/faire-part-mariage.jpg) no-repeat;
	background-size:100%;
}
#mariage:hover{
	background: url(images/infographie/mise-en-page/faire-part-mariage2.jpg) no-repeat;
}
#bum{
	background: url(images/infographie/mise-en-page/mise-en-page-accordéon-brasserie-buumdroegers.jpg) no-repeat;
	background-size:100%;
}
#bum:hover{
	background: url(images/infographie/mise-en-page/mise-en-page-accordéon-brasserie-buumdroegers2.jpg) no-repeat;
}
#retouch{
	background: url(images/infographie/retouch/retouch-image.jpg) no-repeat;
	background-size:100%;
}
#retouch:hover{
	background: url(images/infographie/retouch/retouch-image2.jpg) no-repeat;
}

/*------content web-------*/
#webdesign{
	background: url(images/web/webdesign.jpg) no-repeat;
	background-size:100%;
}
#webdesign:hover{
	background: url(images/web/webdesign2.jpg) no-repeat;
}
#ux{
	background: url(images/web/ux.jpg) no-repeat;
	background-size:100%;
}
#ux:hover{
	background: url(images/web/ux2.jpg) no-repeat;
}
#integration{
	background: url(images/web/integration.jpg) no-repeat;
	background-size:100%;
}
#integration:hover{
	background: url(images/web/integration2.jpg) no-repeat;
}
#wordpress{
	background: url(images/web/wordpress.jpg) no-repeat;
	background-size:100%;
}
#wordpress:hover{
	background: url(images/web/wordpress2.jpg) no-repeat;
}
#boutique{
	background: url(images/web/boutique.png) no-repeat;
	background-size:100%;
}
#boutique:hover{
	background: url(images/web/boutique2.png) no-repeat;
}
#reseaux{
	background: url(images/web/reseaux.jpg) no-repeat;
	background-size:100%;
}
#reseaux:hover{
	background: url(images/web/reseaux2.jpg) no-repeat;
}


/*------content illustation-------*/
#jeun{
	background: url(images/illustation/visu_jeun.jpg) no-repeat;
	background-size:100%;
}
#jeun:hover{
	background: url(images/illustation/visu_jeun2.jpg) no-repeat;
}
#bede{
	background: url(images/illustation/visu_bede.jpg) no-repeat;
	background-size:100%;
}
#bede:hover{
	background: url(images/illustation/visu_bede2.jpg) no-repeat;
}
#art{
	background: url(images/illustation/visu_art.jpg) no-repeat;
	background-size:100%;
}
#art:hover{
	background: url(images/illustation/visu_art2.jpg) no-repeat;
}
#real{
	background: url(images/illustation/visu_real.jpg) no-repeat;
	background-size:100%;
}
#real:hover{
	background: url(images/illustation/visu_real2.jpg) no-repeat;
}
#trad{
	background: url(images/illustation/visu_trad.jpg) no-repeat;
	background-size:100%;
}
#trad:hover{
	background: url(images/illustation/visu_trad2.jpg) no-repeat;
}
#num{
	background: url(images/illustation/visu_num.jpg) no-repeat;
	background-size:100%;
}
#num:hover{
	background: url(images/illustation/visu_num2.jpg) no-repeat;
}

/*------content motion-------*/
#story{
	background: url(images/motion/story.jpg) no-repeat;
	background-size:100%;
}
#story:hover{
	background: url(images/motion/story.gif) no-repeat;
	background-size:100%;
}
#animclass{
	background: url(images/motion/animclass.jpg) no-repeat;
	background-size:100%;
}
#animclass:hover{
	background: url(images/motion/animclass.gif) no-repeat;
	background-size:100%;
}
#creaanim{
	background: url(images/motion/creaanim.jpg) no-repeat;
	background-size:100%;
}
#creaanim:hover{
	background: url(images/motion/creaanim.gif) no-repeat;
	background-size:100%;
}
#animvecto{
	background: url(images/motion/animvecto.jpg) no-repeat;
	background-size:100%;
}
#animvecto:hover{
	background: url(images/motion/animvecto.gif) no-repeat;
	background-size:100%;
}
#prisevue{
	background: url(images/motion/prisevue.jpg) no-repeat;
	background-size:100%;
}
#prisevue:hover{
	background: url(images/motion/prisevue.gif) no-repeat;
	background-size:100%;
}
#montage{
	background: url(images/motion/montage.jpg) no-repeat;
	background-size:100%;
}
#montage:hover{
	background: url(images/motion/montage.gif) no-repeat;
	background-size:100%;
}

/*-----------------------logiciels----------------------*/

.bloc_logiciel{
	display: inline-block;
	margin:  13px;
	width:100px;
	height:100px;
	overflow: hidden;
	border-radius: 100px;
transition: all ease-out 0.4s;
}
/*
.bloc_logiciels:hover{
	width:220px;
	height:220px;
	border-radius: 220px;
	transition: all ease-out 0.4s;
}*/
.bloc_logiciel .popup{
	background-color: rgba(84, 51, 49, 0.7);
	padding-top: 10px;
	border-radius: 0px;
	position:relative;

	display: none;
}
.bloc_logiciel .popup h5{
	text-align: center !important;
}
.bloc_logiciel:hover .popup{
	top: 0%;
}



#html{
	background: url(images/html5.png) no-repeat;
	background-size:100%;
}
#css{
	background: url(images/css3.png) no-repeat;
	background-size:100%;
}

#javascript{
	background: url(images/javascript.png) no-repeat;
	background-size:100%;
}
#photoshop{
	background: url(images/photoshop.png) no-repeat;
	background-size:100%;
}
#indesign{
	background: url(images/in.png) no-repeat;
	background-size:100%;
}
#illustrator{
	background: url(images/illustrator.png) no-repeat;
	background-size:100%;
}
#dream{
	background: url(images/dream.png) no-repeat;
	background-size:100%;
}
#after{
	background: url(images/after.png) no-repeat;
	background-size:100%;
}
#php{
	background: url(images/php.png) no-repeat;
	background-size:100%;
}
#joomla{
	background: url(images/joomla.png) no-repeat;
	background-size:100%;
}
#wp{
	background: url(images/wp.png) no-repeat;
	background-size:100%;
}
#cms{
	background: url(images/cms.png) no-repeat;
	background-size:100%;
}
#jquery{
	background: url(images/jquery.png) no-repeat;
	background-size:100%;
}


/*-----------------------loisirs----------------------*/

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-bottom: 20px solid rgba(176, 183, 177, 0.4);;
}
.bloc_loisirs{
width:220px;
height:220px;
cursor:  pointer;
}
#voyage{
	background: url(images/voyage.png) no-repeat;
	background-size:100%;
}

#decouverte{
	background: url(images/astro.png) no-repeat;
	background-size:100%;
}

#velo{
	background: url(images/velo.png) no-repeat;
	background-size:100%;
}
#veille{
	background: url(images/veille.png) no-repeat;
	background-size:100%;
}

#bloc_plus_loisirs{
width :100%;
height:auto;
background: rgba(176, 183, 177, 0.4);
display: inline-block;
padding:30px;
/*margin-bottom:200px;*/
}

.grey{

	background: rgba(176, 183, 177, 0.4);
}


/************************footer********************/
footer{
	padding-bottom: 200px;
}
/*footer a{
text-decoration:none;
font-family:'Exo 2', sans-serif;
font-size:20px;
text-transform: capitalize;
color:#afc847;
line-height:60px;
}
footer a:hover {
font-size:30px;
color: #030;
}*/
.modal-content {
	 border-radius: 0px !important;
	 width: 500px;
}
#myModalpigeon p{
	font-size:20px;
	color:#FFF;
}

form{
max-width: 700px;
text-align:center;
margin: 2em auto;
}

input{
margin: 15px 0 !important;
text-align:left !important;
background: white;
border: 0px;
padding: 4px;
letter-spacing: 1.2px;
width: 100%;
}

textarea{
text-align:left;
width: 100%;
height: 250px;
border: 0px;
background: white;
padding: 10px;
letter-spacing: 1.2px;
}

#antibot{
	width: 200px;
	float: left;
}

.btn{
 border-radius: 0 !important;
 margin-bottom: 20px !important;
 	} 
.close{
	  margin: 10px 20px  !important;
	  font-size: 40px  !important;
	  float: none !important;
}
#send{
	margin:0 auto !important;
	width: 200px !important;
	text-align: center !important;
}

.myModaltwitt{
	width: 500px;
}
.myModaltwitt{
	width: 500px;
}
/******************************************************************/
/***************************************page-content********************************/
/*********************************************************************/

.topcontent{
position:fixed;
padding:10px;
width:100%;
height:80px;
}

/*
.topcontent_colo_info{
background: rgb(255, 104, 237) !important;
}
.topcontent_colo_illu{
background: rgba(243, 161, 48, 1)!important;;
}
.topcontent_colo_web{
background: rgb(255, 92, 65) !important;
}
.topcontent_colo_lois{
background:#BABABA;
}
.topcontent_colo_motion{
background: #ffdb5e;
}
*/

.backhome{

}

.topcontent h1{
margin: 0;
text-align: center;
margin: 5px 0 0;
float: left;
}

.topcontent nav ul{
float: right;
margin-top: 1em;
}

.topcontent nav ul li{
display: inline-block;
list-style: none;
float:left;
margin-right:2em;
}
.topcontent nav ul li a{
color:#FFF !important;
font-size: 1.2em;
}
.topcontent nav ul li a:hover,
.topcontent nav ul li a:focus{
color: rgba(250,250,250,0.6);
/*color:#330E04;*/
text-decoration: none;
}



#closebox{
  width: 50px;
  height: 50px;
  float:left;
  transform: scale(1.3);
  -webkit-transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
   	 transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */

 }
 #closebox::before{
      background:#330E04;
      position: absolute;
      display:block;
      content:'';
      width: 70%;
      height: 6%;
      top: 47%;
      left: 15%;
      transform: rotate(45deg);

       -webkit-transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
   	 transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
  } 
#closebox::after{
      background: #330E04;
      position: absolute;
      display:block;
      content:'';
      width: 6%;
      height: 70%;
      left: 47%;
      top: 15%;
      transform: rotate(45deg);

       -webkit-transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
   	 transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
  } 
  #closebox:hover::after{
 	transform: rotate(135deg);
 	 -webkit-transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
   	 transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
 }
  #closebox:hover::before{
 	transform: rotate(135deg);
 		 -webkit-transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
    	 transition: all ease 0.5s; /* For Safari 3.1 to 6.0 */
 }


#lightbox{
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:1000;

}

.fleche{
	font-size: 30px;
	color:#330E04;
}


.contentcontent{
	padding-top:10px;
}
.contentcontent img{
	margin: 40px 10px;
	width: 30%;
}
.contentcontent h5{
font-size: 3em !important;
padding-top: 100px;
}
.contentcontent a{
color:rgba(12,12,38,0.2) !important;
}
.contentcontent a:hover{
color:rgba(12,12,38,0.8) !important;
}


/*menu responsive content*/
#menu_content_resp{
display:none;
}
#btn_menu_content_resp{
	display:none;
	float:right;
	font-size: 4em;
	line-height: 50%;
	cursor: pointer;
}
#menu_content_resp{
	position: fixed;
	top: 70px;
	right: -500px;
}
#menu_content_resp nav{
margin: 20px;
}
#menu_content_resp nav ul{
margin:20px;
}
#menu_content_resp nav ul li{
margin: 20px;
list-style: none;
}
#menu_content_resp nav ul li a{
font-size: 2em;
color:white;
}


/*------------------------------------------responsive-----------------------------------*/
@media screen and (max-width: 740px) {
#general_nav_left{
display: none !important;
}
#general_nav_left_resp{
display: inline-block;
}
#btn_general_nav_left_resp{
display: block !important;
}
 .bloc_plus_loisirs{
display: none !important;
}
.margintopcontent{
   padding-left: 0 !important;
   padding-right: 0 !important;
}
.bloc_loisirs {
    height: 160px !important;
    }
#myModalmail .modal-body{
	text-align:left !important;
}
.modal-content ,
form,
textarea,
input,
#send{
    width: 90%;
}
/**********resp**web-solid*******/


#asidesolidresp{
position: relative;
top: 0;
left:0;
width:100%;
height:auto;
}
/*----*****resp*content---*/
.contentcontent img{
	width:80%;
	margin: 20px 0;
}

/*
#menu_content_resp nav ul li a{
font-size: 1.2em;
}
#menu_content_resp nav ul li{
margin-left:15px;
}*/

.contentcontent h5{
padding-top: 150px;
}
#closebox{
z-index:2000;
}

#menu_content_laptop{
display: none;
 }
#btn_menu_content_resp,
#menu_content_resp{
display:block;
}
.popup {
	padding: 0px;
    top: 80%;
}

}
	
/*-----fin--responsive--------*/


#cpt{
	display:none;	
	}


/*------------page web solidaire------------*/


#titlewebso{
	height:auto!important;
}

#websolidaire h3{
padding:30px;
color:#afc847;
}

#websolidaire h6{
font-size:15px;
font-weight: lighter;

}
#websolidaire h6:first-letter{
text-transform:capitalize;
}


.subtit_solid{
color: #006633;
}
#websolidaire a{
	transition: all ease 0.2s;
	color: #006633;
	text-transform:capitalize;
	border:solid 2px rgba(20,20,20,0);
}
#websolidaire a:hover{
	font-size:22px;
	color: #009966;
	border:none;
	transition: all ease 0.2s;
}
#websolidaire h4{
	font-size:20px;
}
#websolidaire div{
	height:40px;
}

/*
#asidesolidresp #nav_sol ul a{
	display:block;
	margin-left:20px;
	padding:0;
	width:150px;
	height:50px;
	list-style:none;
	transition: all ease 0.2s;
	color: #B04A28;
}

#asidesolidresp #nav_sol ul a:hover{
color: #B04A28;
font-size: 20px;
}

.actif_menu_sol{
color: #B04A28;
font-size: 20px;
}*/

/*nav*/
.bloc_nav_solidaire{
position: fixed;
		left:0;
		top:0px;
		width:200px;
		height: 80px;
		background: #96AB00;
		text-align: right;
		transition: all ease 0.5s;
		padding: 10px;
		text-align: left;

}
.bloc_nav_solidaire a{
display: block;
width: 100%;
height:100%;
color:#FFF;

}
.bloc_nav_solidaire:hover{
position: fixed;
		left:0;
		top:0px;
		width:200px;
		height: 80px;
		background: #FFF;
		font-size: 1.2em;
		text-align: right;
		transition: all ease 0.5s;
		padding: 5px;
		text-align: left;

}
.bloc_nav_solidaire:hover a{
		color: #006633 !important;

}
#share_nav_solidaire{
	position:fixed;
	top: 100px;

}

#share_nav_solidaire ul{
	margin-right: 0px;
	padding:0;

}
#share_nav_solidaire ul li{
		position: relative;
		left:-15px;
		top:0px;
		width:auto;
		height: 40px;
		background: #96AB00;
		text-align: right;
		transition: all ease 0.5s;
		list-style: none;
		padding: 10px;
-webkit-box-shadow: 43px 63px 42px -42px rgba(0,0,0,0.75);
-moz-box-shadow: 43px 63px 42px -42px rgba(0,0,0,0.75);
box-shadow: 43px 63px 42px -42px rgba(0,0,0,0.75);
}
#share_nav_solidaire ul li:hover a{
		color:#596B00;
}
#share_nav_solidaire ul li:hover{
		left: 0px;
		transition: all ease 0.5s;
}

.seemore{

}
.seemore:before{
	position: absolute;
	content:"Voir le projet >";
	top: 0;
	left: 0;
	width: 200px;
	height: 50px;
	background: red;
}