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


@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500);

#wrapper { min-height:1500px;position: relative; }

	/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

table {
    border-collapse: collapse;
}

table, td, th {
   margin:0; padding:0;border: 1px solid  #CCC; text-align:center;margin:auto;
}
th { width:100px;text-align:center; font-weight:normal;}


li{cursor: pointer; cursor: hand;}
/* intro */

.pgauche {
	text-align:left;	margin:0;padding:0;
}
div#imageintro {
	top:0;
	max-height:500px;
	overflow:hidden;

	 }
.im_intro {
	width:100%;
	overflow:hidden;
}
#logointro {                     /* frederic ducout*/
	position:relative;
	z-index:100;
	text-align:center;
	margin-right:auto;
	margin-left:auto;
	overflow:visible;
	font-size:1.8em;
	font-weight:500;
	z-index:1;
}
									/* slider*/
#slideshow {	
	overflow:hidden;
  position: relative;
  width: 100%;
  height: 600px;
  z-index:10;
  	text-align:center;	

 
}
.slideimg img{
	height:600px;
	text-align:center;	
	}
.slideimg {
  	width:100%;
  	top:0;
			text-align:center;	
	

}  
										 /* header */
 
 .divalign {
	 width:100%;
 }


a.lienactif  {
	color:#FF9900;
}
a.lienactif:active  {
	color:#FF9900;
}
a.lienactif:visited {
	color:#000;
}
a.lienactif:hover {
	color:#FF9900;
}

#listeimages {
	width:100%;
	text-align:center;
	margin-bottom:250px;
}
#listeimages img {
	max-height:80%;
	max-width:92%;
	
}
#listeimages p{
	margin-bottom:0;
	}
.price { 
}
.alicenter {
	text-align:center;
}
#instadiv {
	padding-top:5%;
	text-align:center;
	margin:0;
}
#instalogo {						/* reseau sociaux*/
	display:inline;
	position:absolute;
	float:left;
	margin-left:2%;
	margin-top:-44px;
	opacity:0.8;
	letter-spacing:2px;
	z-index:2;
}
#instalogo img {
	with:16px;
	height:16px;
}

#div_print{
	display:inline;
	position:absolute;
	right:2%;
	margin-top:-39px;
	opacity:0.8;
	letter-spacing:2px;
	font-size:.9em;
	text-transform:uppercase;
	z-index:10000;
}

 													  /* Navbar */

  .navbar + .docs-section {
    border-top-width: 0; }
  .navbar,
  .navbar-spacer {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    z-index: 99;
   }
 
  .navbar > .container {
 /*	clear:both;   positionnement équvalent firefox et safari*/
    width:720px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:-35px;
	}
  .navbar-list {
    list-style: none;
    margin-bottom: 0;
	 }
  .navbar-item {
    position: relative;
    float: left;
    margin-bottom: 0;
	border-top: 1px solid #000; }
  .navbar-link {                           /* reglage menu*/
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .1rem;
    text-align:center;
	padding-left:4px;
	padding-right:5px;
    text-decoration: none;
    color: #222;
	 }
  .navbar-link.active {
    color: #33C3F0; }
  .has-docked-nav .navbar {
    position: fixed;
    top: 0;
    left: 0; }
  .has-docked-nav .navbar-spacer {
    display: block; }
  /* Re-overiding the width 100% declaration to match size of % based container */
  .has-docked-nav .navbar > .container {
    width: 100%; }
	
	/*about*/
	

	#texte-about{
		width:685px;
		margin-right:auto;
		margin-left:auto;
		text-align: justify;
    	text-justify: inter-word;
		padding-right:20px;
	}
	
.texteenimage {
	width:100%;
	max-width:1220px;
	margin-right:auto;
		margin-left:auto;
	}


	/* sub menu*/
.subnav{
	clear:both;
	margin-top:8px;
	max-width:1000px;
	width:76%;
	display:block;
	flex-direction:row;            /* default value; can be omitted */
  	flex-wrap: wrap;              /* default value; can be omitted */
  	justify-content:space-around;
	margin-left:auto;
	margin-right:auto;
	}
#subnav-hotel,#subnav-portrait,#subnav-cuisine,#subnav-editorial,#subnav-cultural{
		display:none;
}
.subnav-box {
	padding-left:10px;
	padding-right:10px;
	padding-bottom:5px;
	margin-top:5px;
	text-transform: uppercase;
	font-size:13px;
	text-align:center;
	height:1em;
	line-height:1em;  /* permet l'alignement vertical dans le conteneur*/
}
.subnav-box a{
	color:#000;	
}
.subnav-box a:active{
	color:#000;	
}
.subnav-box a:visited{
	color:#000;	
}
.subnav-box a:hover{
	color:#FF9900;	
}
.titre-series{
	font-size:2em;
	text-align:center;
	text-transform: uppercase;
	font-weight:400;
	margin:0;
	padding-bottom:9px;
	}

section {
	padding-top:10px;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #222;
  text-decoration:none; }
a:hover {
  color: #FF9900; }



/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
   }
   
   
/* arrow to top http://www.jqueryscript.net/other/Smooth-Page-Scroll-to-Top-with-jQuery.html*/

.scrollup{
			width:40px;
			height:40px;			
			text-indent:-9999px;
			opacity:0.9;
			position:fixed;
			bottom:90px;
			right:7%;
			display:none;			
			background: url('http://www.fredericducoutphotography.com/images/icon_top.png') no-repeat;
			border:1px thin #666;
			border-radius:20px;
		}


	
@media (max-width: 1280px) {
		/* slider*/
#slideshow {	
	overflow:hidden;
  position: relative;
  width: 100%;
  height: 600px;
  z-index:10;
  	text-align:center;	

 
}
.slideimg img{
	height:600px;
	text-align:center;	
	}
.slideimg {
  	width:100%;
  	top:0;
	text-align:center;	
			}
.texteenimage{ padding-left:4%;}

}  
@media (max-width: 1180px) {
 
#slideshow {	
	
  height:300px;
 
}
.slideimg img{
	height:300px;
}
.slideimg {
  	width:100%;
  	top:0;
	text-align:center;	
			}
.texteenimage{ padding-left:4%;}

  
  }
@media (max-width: 885px) {
	
 

.navbar > .container {
	width:100%;
	margin:0;
	padding-left:0px;
	
}
.wrapper {width:100%;}
.navbar,
  .navbar-spacer {
	text-align:center;
}
.navbar-list {
	padding:0;
}
.navbar > .container {
	margin-top:-20px;
}

 .navbar-item {
	 float:none;
	 border:0;
 }
 .navbar-link {
	font-size:1em;
 	margin:0;
 }
 #subnav{
	max-width:300px; 
 }
 
	.style-about{
		text-align:left;
	}
	#texte-about{
		width:685px;
		margin-right:auto;
		margin-left:auto;
		text-align: justify;
    	text-justify: inter-word;
		padding-right:20px;
	}
	#texte-about{
		clear:both;
		padding-right:0;
		width:94%;
		margin-right:3%;
		margin-left:3%;	
	}
 #div_print{
	right:0;
	width:100px;
	position:relative;
	text-align:center;
	margin-right:auto;
	margin-left:auto;
	opacity:0.8;
	letter-spacing:2px;
}
#logointro {                     /* frederic ducout*/
text-decoration: underline;	}
 
#headleft,#headcenter,#headright {
	width:100%;
	float:none;
	text-align:center;
	padding:0;
	margin:0;
	}
	
#headleft {
 padding-top:25px;
 }
#listeimages > img {
	max-width:90%;
}
#instalogo {
	width:100%;
	top:auto;
	padding:0;
	padding-top:118px;
	text-align:center;
	letter-spacing:40px;
	margin-left:0;
	position:absolute;
	bottom:-100px;
}
#instalogo img {
	width:24px;
	height:24px;
}
}
@media (max-width: 450px) 
{
	#logointro {                     /* frederic ducout*/
	line-height:1em;
	margin-bottom:40px;
}
#slideshow {	
	
  height:200px;
 
}
.slideimg img{
	height:200px;
}

@media (max-width: 300px) {

#slideshow {	
  height: 150px;

}
}