@charset "UTF-8";
/* CSS Document */
/*
Auteur: Fanny Marais
Site : https://fannymarais.com/
Date: Octobre 2016 - Nov 2022
*/

/* SOMMAIRE :
1. GENERAL
2. TEXTE
3. HEADER
4. PORTFOLIO
4.1 Effet vignettes
4.2 Porfolio Bootstrap
5. FICHE CLIENT
*/
		
/*------------ 1. GENERAL ------------------*/
body {
  padding-top: 0px; font-family: 'Raleway', sans-serif;font-weight: 300;
  font-size: 15px; color:#111;
  margin-bottom: 0px;
  background: url(../imgs/bg.gif) repeat-x top fixed;background-color:#000;
}
  
html {
	position: relative; min-height: 100%;}

.footer { 
	height: 51px;border-top: 1px solid #666; }
	
.container {
  clear:both; position: relative;
  width: auto; max-width: 1280px; min-height:0px; /*hauteur footer*/
  /*padding: 0 15px;*/ padding:0;}

.container-center {
	position: relative; display: block;
	align-content: center; float: center; text-align: center;
	width: auto; height: auto; max-width: 1280px;
	padding: 0px; padding-bottom: 20px; marging: auto;
	left: 0px;
}
.droite{display:inline-block; position:relative; float:left;background-color:white;width:100%;}

/*------------ 1.1 IMAGES ------------------*/
.imgresponsive {max-width: 100%; height: auto; width: auto;}
.imghome0{
  margin:0;padding:0;
  width:auto; height:auto; min-height: 1100px;
  /*background: url(../imgs/homepage-img3.jpg) no-repeat fixed;
  background: url(../imgs/homepage-desktop-prizeRETINA.jpg) no-repeat fixed;*/ 
  background: url(../imgs/home2023.jpg) no-repeat fixed;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  background-position:150px top;
	position: inherit;
	top: 0px; left: 0px;background-position-x: 150px;
 }
.imghome{
	margin:auto; padding:0px;
	position: relative;
	min-height: 100vh;
	overflow-x: hidden;
	background: url("../imgs/home2023b.jpg") no-repeat ;
	background-position: 0px 150px 0px;
	background-size: cover;
	background-origin:inherit;
}
.imghome img{ min-height: 100%; width: 100%; overflow-x: hidden;}

.imgjane{
  margin:0; padding-right:10px; padding-bottom:20px; height:auto; width:260px; float:left;
 }
 
 
@media (max-width: 767px) {/*smartphone*/
	.nosmartphone {display:none!important;}
	.mobile{display: block; visibility: visible;}
	.droite{padding-left:0; padding-top:80px; width:100%;}
	/*.imghome{background-position:-130px 40px;}*/
	.imghome{
		height:auto; min-height: 600px;
		
/*		background: url(../imgs/homepage-mobile-prize.jpg) no-repeat fixed;*/
		background: url(../imgs/home-mobile2023.jpg) no-repeat fixed;
		background-color:black; 
		/*background-size:cover;-webkit-background-size: cover;*/
		background-size:100%; background-position:left top;
		}
	.imgjane{width:160px;}
	}

@media (min-width: 768px) {/*grand ecran uniquement*/
	.droite{padding-left:300px;width:100%; }
	.mobile{display: block; visibility: hidden;}
	}
@media (min-width: 1280px) {
	.droite{left:50%; margin-left:-640px;padding-left:300px; max-width:1280px;}
	}	
	

/*------------ 2. TEXTE ------------------*/
a, a:hover, a:focus, a:link, a:visited{-webkit-tap-highlight-color: rgba(0,0,0,0);outline-style:none;color:#dc0100;}
a{color:#dc0100;text-decoration:none;}
a:hover{text-decoration:underline;}

h1, h2, h3{ color:#ab9a63; clear:both; font-family: 'Raleway', sans-serif; font-weight: 300;}
h1{ font-size:28px;line-height:normal;text-transform: uppercase;text-align:center; background-color:#dc0100;
display:inline-block; padding-left:10px; padding-right:10px; color:white; margin-bottom:20px;}
/*h1.rub1{ background-color:#670e0a;}
h1.rub2{ background-color:#aa0108;}
h1.rub3{ background-color:#dc0100;}
h1.rub4{ background-color:#de001a;}
h1.rub5{ background-color:#e31043;}*/
h2{	font-size:26px;line-height:26px; text-align:left; padding-bottom:0px;color:#dc0100;font-weight:300; clear:both;}
h3{	font-size:18px;line-height:20px; padding-bottom:10px;border-bottom:1px solid #000;color:black;display:inline-block;}
h4{ text-transform: uppercase;}
.rouge, a.rouge{ color:#dc0100;}
.noir, a.noir{ color:#000000;}
.works h2{	line-height:auto; padding-top:10px; padding-bottom:0;}
.works h3{	line-height:20px; padding-bottom:20px; padding-top:0;}

p{padding-top:10px;}
br.clearbreak { clear: both; }

.lead {font-size: 18px; color:#333;font-weight:300;}
.soustitre{ color:#888; font-weight:400; font-size:12px;padding-top:-20px; line-height:10px; padding-bottom:50px;}

.container .text-muted {margin: 10px 0;}
.footer .text-muted, .footer .text-muted a {color:black; font-size:11px;}
/*.footer{width:97%; height:auto; display:block; position:absolute; bottom:0px;z-index:200;background-color: yellow;margin-bottom:20px;margin-top: 20px; }*/
.legende{ font-size:12px;line-height:normal; font-style:italic; padding-top:5px;color:#777; text-align:right;}
.divcentre{display: flex;align-items: center;justify-content: center;}

@media (max-width: 767px) {
	h2{	font-size:20px;line-height:20px;}
	.mobile{display:none;}
	}

blockquote{
	/*font-family: 'Mr De Haviland', cursive;*/
	font-size:16px; line-height:20px;
}

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

#logo {
    position: absolute; top: 20px; height:30px; z-index:200; width:100%;text-align:center; align-content:center;}
#logo h1 { line-height:15px;}
#logo a:hover{text-decoration:none;}
#logo img{width:250px; height:auto; padding-left:auto; padding-right:auto; text-align:center;}
#prize img{width:150px; height:auto; padding-left:auto; padding-right:auto; text-align:center;padding-bottom: 20px;}

#languages{
	display:block; position:absolute; top:0; z-index:300; padding-top:2px; float:right;
	font-weight: 400; height:30px;
	font-style:normal; font-size:10px; text-align:right; letter-spacing:0.8px; text-align:right;
	color:white;width:100%; line-height:30px;
	margin-left: auto;margin-right: auto;padding-right: 15px; 
	}
#languages a{ color:#670e0a;} 
#languages a:hover{text-decoration: underline;color:#dc0100;}

.socialnetwork{ 
	width:100%; height:auto; 
	display:block; position:absolute; bottom:0px;z-index:201;
	text-align:center; align-content:center;font-size: 12px;color:#999; line-height:14px; padding-bottom:20px; 
	} 
.socialnetwork i, .socialnetwork a{ padding-left: 5px;padding-right: 5px;padding-bottom: 10px; color:#999; }
.socialnetwork a:hover, .socialnetwork a:hover i{ color:white; } 

.socialnetwork2 i, .socialnetwork2 a{ padding-left: 5px;padding-right: 5px;padding-bottom: 10px; color:black; }
.socialnetwork2 a:hover, .socialnetwork2 a:hover i{ color:#dc0100; } 

#gototop{font-size: 12px; color: #ab9a63; float:right; padding-bottom:75px; padding-right:10px;}
#gototop a{text-decoration:none;color: #ab9a63; }
#gototop a:hover{text-decoration:underline;}

@media (max-width: 767px) {/*smartphone*/
	#logo {float:right; top:0; left:0; }
	#logo img{width:200px; height:auto;}
	.soustitre{padding-bottom:0px;}
}
@media (min-width: 1280px) {
	#gototop{ right:50%; margin-right:-625px;}
}


/*------------ 4. PORTFOLIO ------------------*/


/*------------ 4.1 Effet vignettes ------------------*/	
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}

/*------------ 4.2 Porfolio Bootstrap ------------------*/

.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    

.clear-L-R {   
    padding-left:0px;
    padding-right: 0px;
}     

.mavignette img{ 
    padding:5px;
}
.caption{
    cursor: pointer;
    position: absolute;
    top:0;
    height:100%;
    background-color: rgba(0,0,0,0.65);
    opacity: 0;
    -webkit-transition:all 0.45s ease-in-out;
    -moz-transition:all 0.45s ease-in-out;
    -o-transition:all 0.45s ease-in-out;
    -ms-transition:all 0.45s ease-in-out;
    transition:all 0.45s ease-in-out;
	border:5px solid white;
}
.caption:hover{opacity: 1;
}
.caption-text h1{
    text-transform: uppercase;
    font-size: 20px; line-height:26px; padding-top:5px; padding-bottom:5px;
}
.caption-text{
    color: #fff;
    text-align: center;
}  
@media (max-width: 610px) {
	.caption-text h1{font-size: 18px;}
}
@media (max-width: 480px){
	.caption-text h1{	font-size:13px; line-height:14px; overflow:hidden;}
	.caption-text p{ display:none;}
  }
  
/*------------ 5. FICHE CLIENT ------------------*/	
.back{ 
	display:inline-bock; position:absolute;
	float:left; top:0; left:0; text-align:left;
  	width: 100px;
	padding-top:20px;color:black; }

.ficheClient{
	text-align:left;height:auto;width:auto; 
	border-bottom:1px solid #CCCCCC; border-top:1px solid #CCCCCC; 
	clear:both; padding-bottom:10px;padding-top:10px; margin-top:20px;margin-bottom:10px;}