@charset "UTF-8";
/* CSS Document */
/*
Auteur: Fanny Marais
Site : http://fannymarais.free.fr/
Date: Septembre 2015
*/

/* SOMMAIRE :
1. GENERAL
2. TEXTE
3. HEADER
4. HOMEPAGE
5. PORTFOLIO
6. PUBLICATIONS
7. PROJETS

*/
		
/*------------ 1. GENERAL ------------------*/
body {
  padding-top: 0px;
  font-family: 'Open Sans', sans-serif;font-weight: 300;
  font-size: 16px; color:#444444;
  background-color:white;margin-bottom: 60px;}

html {position: relative; min-height: 100%;}

.footer { position: absolute; z-index:200; bottom: 0px; width: 100%; background-color:white; height: 175px; padding:0;}
#logo-footer { 
display:inline-block; position:relative; padding:0px; float:left; 
width:177px; height:175px; 
background-color:white;
background-image: url("../imgs/logo-Ahmed-Rawat-main.png"); background-repeat:no-repeat !important;
background-size: 60%; background-position:center;
vertical-align:middle;text-align:center;overflow: hidden;
background-repeat:repeat;
align-content:center; 
}
.Gfooter { display:inline-block; position:relative; padding:0px; float:left; width: auto; }
.Txtfooter { display:inline-block; padding:0; float:left; width: auto; min-height:122px; font-size:11px; color:white; padding-right:10px; padding-top:30px;}
.TxtfooterR { display:inline-block; padding:0; float:right; width: auto; min-height:122px; font-size:12px; color:white; padding-right:10px; padding-top:30px;}
.container-footer {
  clear:both; display:block;
  position: relative;
  width: auto; max-width: 1280px; min-height:175px;
  padding: 0 ; margin:auto; background-color:#a22136; 
}
.container {
  clear:both;
  position: relative;
  width: auto; max-width: 1280px;
  padding: 0 15px;
  padding-bottom:60px;
  min-height:30px; /*hauteur footer*/
  background-color:white;
}

.container-fluid {
	position: relative; float:left;
 	height:auto; width: auto; max-width: 1280px;
	padding:0; marging:0; padding-bottom:20px; 
	left:-15px; text-align:left;
}
.container-center {
	position: relative; display: block;
	align-content: center; float: center; text-align: center;
	width: auto; height: auto; max-width: 1280px;
	padding: 0 15px; padding-bottom: 60px; marging: auto;
	align-content:center;
}
#Contenu img{
		max-width: 100%; height: auto; width: auto;
    	box-sizing: border-box;
}
.imgresponsive {max-width: 100%; height: auto; width: auto;}
.blocbullet{display:inline-block; position:relative; float:left;padding:0;padding-right:10px; width:280px; height:auto; marging:0px; text-align:left; }
@media (max-width: 767px) {.nosmartphone {display:none!important;}}

#Socialbloc{display:inline-block; float: left; vertical-align:top; padding:0px 20px 10px 0; clear:both;}
.visuelG{display:inline-block; float:left;padding-bottom:15px; width:128px; height:auto; marging-right:15px;}
.visuelD{display:inline-block; float:right;padding-bottom:15px; width:250px; height:auto; marging-left:15px;}
@media (max-width: 767px) {/*smartphone*/
	#logo-footer { width:100px; height:175px; background-size: 90%;}

	#Socialbloc{padding-left:0px;padding-right:10px;vertical-align:top;}
	.visuelG{clear:both;}
	.visuelD{width:180px; height:auto; marging-left:5px;}
	}

@media (min-width: 768px) {/*grand ecran uniquement*/
/*	#margegauche{
		width: 200px; height: auto;
		position: absolute; float: left; left:15px;top:0;
		z-index:101;	padding-top:25px; vertical-align: top;}
	.droite{
		width:100%; position: relative;
		z-index:100; padding-left:240px;
		padding-bottom:5px;}*/
}
@media (max-width: 767px) {/*smartphone*/
	#Socialbloc{padding-left:0px;padding-right:10px;vertical-align:top;}
	.visuelG{clear:both;}
	.franck img{width:200px; height:auto; }
	}
/*@media (min-width: 1280px) {
	#margegauche{left:50%; margin-left:-625px;}}	*/

  

	

/*------------ 2. TEXTE ------------------*/
a, .rouge{color:#a22136;}
a {text-decoration:none;}
a:hover{text-decoration:underline; color:#a22136;}
a, a:hover, a:focus, a:link, a:visited{-webkit-tap-highlight-color: rgba(0,0,0,0);outline-style:none;}
.asterisque {color:#a22136; font-style:italic; font-size:10px; font-weight:bold;}
h1, h2, h3{ color:#a22136; font-weight:normal;text-transform: uppercase;clear:both; font-family: 'Open Sans', sans-serif;;font-weight: 300; clear:both; }
h1{ font-size:30px;line-height:normal; letter-spacing:2px;text-align:center; padding-top:10px;}
h2{	font-size:22px;line-height:24px;background-color:#a22136; color:white; padding:5px; display:inline-block;}
h3{	font-size:20px;line-height:22px;padding:0;}
.gris{color:#999999;}
.lead {font-size: 15px;}
.h2Nivo {
    color: white;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    padding-top: 10px;
    text-transform: uppercase;
}
textarea{font-family: "Open Sans",sans-serif; font-size: 13px;}
h3.title {
    background-color: #a22136;
    border-bottom: medium none;
    bottom: 15px !important;
    color: white;
  	font-family: 'Open Sans', sans-serif;font-weight: 300;
    opacity: 1;
    padding: 10px;
    text-transform: none;
    top: auto;
}
.container .text-muted {margin: 10px 0;}
.centre {text-align:center !important;}
.soustitre{ color:#666; font-weight:normal; font-size:16px;text-transform: uppercase; padding-top:-20px; padding-bottom:10px;font-family: 'Open Sans', sans-serif;font-weight: 400;}

.footer .text-muted,.footer a, .footer .text-muted a {color:white; font-size:11px;}


/*------------ 3. HEADER ------------------*/

#angle-menu{
	display:block; height:80px; width:100%; max-width:1280px;
	background-color:transparent;
	position: absolute; float: center; border:none;
	top: 80px; padding:0 auto; marging:0;
    z-index: 2;
	background-image:url(../imgs/bgnav-main.png);
	background-repeat:no-repeat;
	background-position:0 -10px;
	background-size:100%;
	}


.ombrage {
  border: none;
  -moz-box-shadow: 0px 6px 10px #aaa; 
  -webkit-box-shadow: 0px 6px 10px #aaa; 
  box-shadow: 0px 6px 10px #555; 
  /*filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);zoom: 1;*/
} 
.triangle{
	width:1px;
	height:1px;
	border:1px solid blue;
	border-color: red transparent transparent transparent ;
	border-width:200px;
	position: absolute; top: -20px; z-index:280;	left: 50%; margin-left: -200px;	
}
#Triangle-Main {
	/*background-color:pink;*/
	background-image:url(../imgs/triangle-main.png);
	background-repeat:no-repeat;
	background-position:right top;
	background-size:100%;
	right: 50%; margin-right: -200px;
    position: absolute; top: -35px;
    width: 400px; height:205px; z-index:7;}
#logo {
	background-color:white;
	right: 50%; margin-right: -60px;
    position: absolute; top: -10px;
    width: 120px; height:110px; z-index:300;}
#gototop{font-size: 12px; color: #0b72b5; float:right; padding-bottom:75px; padding-right:10px;}
#gototop a{text-decoration:none;}
#gototop a:hover{text-decoration:underline;}
@media (max-width: 767px) {/*smartphone*/
	#logo {margin-left: -40px; top: 15px; width: 80px; height:auto; right:20px; margin:0;}
	#Triangle-Main {
	background-size:100%;
	right: 60px; margin-right: -150px;top: -15px;
    width: 300px; height:205px; z-index:7;}
}
@media (min-width: 768px) and (max-width: 1090px) {
	#logo {margin-right: -40px; top: 0px; width: 80px; height:auto;}
	#Triangle-Main {
	background-size:100%;
	right: 50%; margin-right: -150px;top: -35px;
    width: 300px; height:205px; z-index:7;}
}
@media (min-width: 1280px) {
	#gototop{ right:50%; margin-right:-625px;}
	#angle-menu,#languages{ left:50%; margin-left:-640px;}
}
.bandeau-top {
	min-height: 100px;
	float:center; top:0px;
	display:block;marging:0; padding: 0;
	width:100%; height:auto;text-align:center;
	background-color:#FFF;}
@media (min-width: 767px) {
	.bandeau-top {	margin-top:86px;}}
@media (max-width: 480px) {/*smartphones 1ere generation*/
	.bandeau-top {overflow:hidden;}
	.bandeau-top img {min-height: 90px;min-width: 480px; overflow:hidden;}	
}
.fildefer {
	display:block; clear:both;
	height: 27px; 
	marging:auto; padding: auto;
	width:100%; position:relative;
	background-color:black;
	margin-top:0px; padding-bottom:10px;
	float:center; 
	min-height:27px;
	margin-left: 0;margin-right: 0;
}
.fildefer p, .fildefer a{color:#666666; padding-top:4px;}
.fildefer a:hover{color:white;}	
		
	
/*------------ 4. HOMEPAGE ------------------*/

.tableau {
  display:table; margin-left: auto; margin-right: auto;
  max-width:850px; width:100%;
  text-align:left;
}	
.colonne {
  display:table-cell;
  width:100px;
  padding:10px;
  text-align:left;
}
.colonneteam {
  display:table-cell;
  width:190px;
  padding:5px;
  text-align:left;
}
/*.colonne:first-child {
  background:#e6e2af;
}
.colonne + .colonne {
  border-left:2px solid #CCC;
  background:#efecca;
}*/

.cellule2colonnes{ 
	display:inline-bock; position:inherit;
	float:left;
	text-align:left;
	margin-left: auto; margin-right: auto;
	padding-right: 15px;
	width: 50%;
	}
@media (max-width: 767px) {/*smartphone*/
.cellule2colonnes{ 
	padding-right: 0px;
	width: 100%; float:left;
	}
.colonne, .colonneteam {
  display:inline-bock; float:left;
  width:100%;
  padding:0;
}
}
		

/*------------ 5. Sommaire PORTFOLIO ------------------*/
.celluleportfolio{ 
	display:inline-bock; position:inherit;
	float:left;
  	min-width: 262px; min-height:360px;
	text-align:center;
	margin-left: auto; margin-right: auto;
	padding: 0 15px;
	width: 33.3333%;
	}
.celluleportfolio p, .celluleportfolio h2{ 
  	min-width: 262px;text-align:center;
	}
.celluleportfolio h2 { margin-top:10px; font-size:18px;}
.celluleportfolio P { margin-top:-5px; font-size:14px;}
.celluleportfolio img { display: inline; margin: 0px; padding:2px; border: 1px solid #ccc;}
.celluleportfolio a:hover img{ border:1px solid #a22136;}
.celluleportfolio a { display: block; position: relative; }
.celluleportfolio a:hover { text-decoration:none; color:#a22136;}
.celluleportfolio h2 a { color:#a22136;}
.celluleportfolio i{ 
	position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 20px;
    border-radius: 50%;
    font-size: 1.8em;
	color:white;
    /*box-shadow: 0 0 0 0.8em transparent;*/
    background: rgba(255,255,255,0.1);
	background:#000000;
    transform: translate3d(0, 0, 0);/* Make the font smoother for Chrome */
    /*transition: box-shadow .6s ease-in-out;*/
	}

@media (max-width: 920px) {
	.celluleportfolio { width: 50%;}	
}
@media (max-width: 610px) {
	.celluleportfolio { width: 100%; height:auto;padding-top:20px;}
	.celluleportfolio p{ padding-bottom:10px; }	
}
/*------------ 6. PROJECT inter ------------------*/
/*#backtosummary{display:block; position:relative; float:right; width:120px; height:auto; padding:0;font-size:13px;padding:0; margin:0;text-transform: uppercase;}
#backtosummary img{padding-right:10px; padding-bottom:5px; clear:none; float:left; width:36px; height:auto;}*/

#backtosummary { display:inline-block;position:relative; float:left; height:50px;}
#backtosummary a {
	display:block;position:relative; float:left; width:145px; height:40px; padding:0;marging:0;
	background-image:url(../imgs/bt-mosaique2.png);
	background-repeat:no-repeat;
	background-position:left top;
	background-size:36%; opacity: 1; text-decoration:none;
}
#backtosummary a:hover {background-position:left -40px;text-decoration:none;color:#a22136;}
#backtosummary p{ line-height:16px; color:#999;padding-left:60px;font-size:12px;text-transform: uppercase;font-weight: 400; }
#margegauche{display:inline-block; float:left; width:100%; padding:0;}
#margegauche p{text-align:justify;}
.droite{display:inline-block; position:relative; width:100%;clear:none;}
	
@media (min-width: 768px) {/*grand ecran uniquement*/
#backtosummary{top:-40px;float:right; }
#margegauche{width: 380px;height: auto;position: absolute;}
.droite{top:-25px; margin:0;padding-left:400px;}	
}

.lireplus{width:100%;}
a.btlireplus, a.btlireplusEN{cursor: pointer;}
.blocsmallvignettes{
    margin: 0; margin-left:-8px; margin-right:8px;float:left;
	display:inline-block; text-align:center;
	height: auto; width: 103%;
	background-color:white;overflow: visible;} 
.blocvignette {
    margin: 0; padding: 8px;
    height: auto; width: auto; max-width:285px;
    float: left; text-align: center;
	color:#333; font-size:12px;
}
.blocvignette img, .projet img {display: inline; margin: 0px; padding:2px; 
border: 1px solid #cccccc;
}
.blocvignette a:hover img { border:1px solid #a22136;}
.blocvignette a { display: block; position: relative;}

.vignettesprojets{ width:108px; height: auto;}

.choixportfolio{
	min-height:330px; text-align:left;
	margin: 0px 15px; padding: 0px; width:270px;}
.choixportfolio a{ text-decoration:none;width:260px;}




/*------------ 7. FORMULAIRE  ------------------*/

.moniframe{
	height:136px;width:250px;
	border:0;
	/*margin:0;*/
	padding-top:2px;
	marging-bottom:10px;
	text-align:left;
	/*overflow-y:auto;*/
	color: #333333;
	font-size:11px;
	font-style:italic;
	/*font-weight:bold;*/
}
.moniframe p{
	margin-top: 0px;
	line-height:120%;
	hyphens: auto;
	}

.moniframeformulaire{
	width:100%; max-width:600px; height:500px;
	border:none;
}