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










html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body{
		background-color:#e9e9e9;
}














#navigation{
	width:20%;
	min-height:3000px;
	background-color:#434F40;
	float:left;
	position:fixed;
}

#navigation ul{
	list-style:none;
	line-height:60px;
	margin-left:15%;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	letter-spacing:1px;
}


#navigation ul li a {
	font-size:18px;
	color:white;
	text-decoration: none;
    font-family: 'Open Sans', sans-serif;
	font-weight:400;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
  }
#navigation ul li a:hover {
	color:#9C6;
}
  
#sub-menu ul li{
	line-height:24px;
}
#sub-menu ul li a{
	font-size:12px !important;
	border-bottom:dotted;
	border-bottom-width:2px;
	border-bottom-color:#656255;
    color:#CCC;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;

	}
#sub-menu ul li a:hover{
	font-size:12px !important;
	color:#9C6;
	border-bottom:dotted;
	border-bottom-width:2px;
}
#lower-menu{
	margin-top:15px;
}




#content{
	width:80%;
	margin-left:20%;
	height:100vh;
	background-color:#e9e9e9;
	float:left;
    overflow: hidden; /* Hide vertical scrollbar */
}







.fade {

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



















.slider {
	height:100%;
	margin:  auto;
	
	
}

.slider-wrapper {
	width: 100%;
	position: relative;
}

.slide {
	float: left;
	position: absolute;
	opacity: 0;
	transition: opacity 3s linear;
}






.slider-wrapper > .slide:first-child {
	opacity: 1;
}
































/* GALLERY */


/* I WOULD SUGGEST YOU TO PLAY AROUND WITH THE VALUES ON THIS STYLESHEET TO UNDERSTAND HOW THINGS WORK IN IT */


/*
 This defines the animation to apply for the gallery 
*/

@-webkit-keyframes slideImage{
 0%:{left:-700px;}
 100%{left:0px;}
}

 @-moz-keyframes slideImage{
 0%{left:-700px;}
 100%{left:0px;}     
}



@-moz-keyframes slidein {
            from {
               margin-left:700px;
               
            }
            100% {
               
               margin-left:25%;
               
            }
            to {
               margin-left:0px;
               
            }
         }
         @-webkit-keyframes slidein {
            from {
               margin-left:700px;
               
            }
            100% {
               
               margin-left:25%;
               
            }
            to {
               margin-left:0px;
               
            }
         }


#mygallery {
	width: 85%; 
	height:99vh;
	background-color:#e9e9e9;
	margin: 0px;   /* Used for centering elements on a page */
	float:left;
	
}

/* 
    This one is for the full image displayed in the center of the page
*/
#fullimage {
	list-style: none; /* This defines the style for <li>. We do not need bullets and that is the reason the value is none */
	width: 880px; 
	height: 600px; 
	margin: 0px; 
	margin-top: 20px; 
	padding: 0px;
	float:left;
	overflow: hidden; /* This line is required to make sure that we hide the images below it. Many of you have defined it as auto, which is wrong in this case.*/
	-moz-animation-duration: 1.5s;
            -webkit-animation-duration: 1.5s;
            -moz-animation-name: fadein;
            -webkit-animation-name: fadein;
	
	
}


#fullimage li img {
  width: 100%;
   
	
}












/* Thumb image styles */


#thumbnails {
	float:left;
	width:15%;
	margin-top:60px;
}

#thumbimage {
  list-style: none;
  overflow: hidden;
  float: left;
  }


#thumbimage li {
	padding-left:10px;
	margin-top:0px;
}

#thumbimage li img {
  /* 
      Many of you had give the value as Absolute.
      It should be relative for this as we need to postion the element relative to its normal position and not its ancestor element (absolute) 
  */
	position:relative; 
	float: left;
	margin-left: 0px;
	border: 0px solid white;
	opacity: 0.5;
	width: 40px; 
    height: 40px;
	margin-bottom:12px;

	
}

#thumbimage li img:hover {
	opacity: 1; /* This is the property required for transparency. It takes values between 0 and 1. */


}

/* 
    I have defined a class tooltip in the html. This is used to style the text that overlays on the image 
*/

.tooltip {
  width: 100%;
  height: -250px;
  position: relative;
  bottom: 50px; /* This property pushes the text from the bottom of the container to on top of the image.*/
  left: 20px;
}

/* 
    This styles the text within the tooltip class.
*/
.tooltip span {
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  padding: 0 0 0 10px;
}

/* 
    To trigger animation in the gallery on click, we use the :target pseudo class. 
    For a tutorial on it visit: http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/
*/


/*

#chateau-d'amboise:target {
  
  -moz-animation-duration: 1.5s;
            -webkit-animation-duration: 1.5s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
}
#corbara:target {
  
  -moz-animation-duration: 1.5s;
            -webkit-animation-duration: 1.5s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
}
#les-baux-de-provence:target {
  
  -moz-animation-duration: 1.5s;
            -webkit-animation-duration: 1.5s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
}
#ognon-valley:target {
  
  -moz-animation-duration: 1.5s;
            -webkit-animation-duration: 1.5s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
}

#scata:target {
  
  -moz-animation-duration: 1.5s;
            -webkit-animation-duration: 1.5s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
}


*/

/* ==== The End ==== */
















#bio_portrait{
	margin-left:2%;
	width:36%;
	height:99vh;
	float:left;
	background-image:url(../portrait2.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

#bio_text{
	width:60%;
	min-height:400px;
	float:left;
	
}
#bio_text p{
	padding-left:60px;
	padding-top:40px;
	padding-right:80px;
	font-family:'open sans', sans serif;
	font-size:14px;
	line-height:18px;
}
.portrait-load{
	width:100%;
	height:100vh;
	background-color:#FF6;
	background-image:url(../portrait-load.gif);
	background-position:left;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:0px;
}

#notification {
    background-color: #F00;
    color: #FFF;
    position: absolute;
    top: -95px;

    transition: top 1.5s;
    -moz-transition: top 1.5s;
    -webkit-transition: top 1.5s;
    -o-transition: top 1.5s;
}

#notification.visible {
    top: 0px;
}

#notification img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}

/** Image has to be wrapped in div. This creates a shiv to bump down the image and all text to wrap **/
#notification:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;
  
}



.columns {
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    column-count: 2;
    column-gap: 5px;	
}




#family{
	width:80%;
	float:left;
	min-height:3000px;
	margin-left:20%;
}

#family img{
	width:90%;
  margin: auto;
  display: block;
}

#family h1{
  font-size:45px;
  font-family: 'Playfair Display', serif;	margin-left:5%;
  float: right;
  height: 100%;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 100px) 0 0);
  color:white;
}
#family p{
  font-size:20px;
  line-height:30px;
  font-family: 'Playfair Display', serif;	margin-left:5%;
  padding-top:30px;
}
.family-title{
    display: flex;
	width:100%;
	height:120px;
	float:left;
	background-color:#F90;
	border-bottom: solid;
	border-bottom-width:20px;
	border-color:#F90;
	margin-bottom:25px;
}






#contact{
    display: flex;
	width:80%;
	margin-left:20%;
	height:90px;
	float:left;
	background-color:#F90;
	border-bottom: solid;
	border-bottom-width:20px;
	border-color:#F90;
	margin-bottom:25px;
}

#contact h1{
  font-size:45px;
  font-family: 'Playfair Display', serif;	margin-left:5%;
  letter-spacing:4px;
  float: right;
  height: 100%;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 100px) 0 0);
  color:white;
}


#contact-list{
  font-size:20px;
  font-family: 'Playfair Display', serif;	
  float:left;
  background-image:url(../images/contact-bg.jpg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position: right top; /*Positioning*/
  width:70%;
  min-height:70vh;
 margin-left:25%;
 
 }

a:link{
	text-decoration: none;
}


.absolute{
	position:fixed;
}


#film{
	width:100%;
	min-height:95vh;
	overflow:hidden;
	padding-left:5%;

	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;

}



.noscroll{
overflow-x: hidden; // hide horizontal
}