/* CSS theme: https://coolors.co/palette/ffcad4-4ecdc4-f7fff7-e0218a-ffe66d Light Pink, Teal, White, Barbie Pink, Yellow. */
body, html {
  height: 100%
}
.bg {
    /* background-color: #e0218a; V1 */
    /* background-color: #cdb4db; V2 */
    /*background-color: #fffcf2;  V3 */
    /* background-color: #dce1ea; */
    background-image: url('images/Sophie2.jpg');
    background-position: center center;
    display: inline-block;
    background-attachment: fixed;
    height:75%;
    width: auto;
    background-size: cover;
    background-repeat: no-repeat;
    margin:0;
    
}
.opaque {
  display:inline-block;
text-align: center;
  background-color: rgba(0, 0, 136, .4);
 
  color: white;
  width: auto;
  margin: 2vw;
  padding: 2%;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}
/* h1 {
 text-align:center;
 font-size: 4vw;
 /* color: #f7fff7; V1 4c9f70*/
 /* color: #bde0fe; V2 */
 /* color: #4c9f70;
 font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;    
} /*
h3 {
    text-align:center;
    font-size: 2vw;
    /* color: #ffcad4; V1 6279b8*/
    /* color: #ffc8dd; V2 */
    /*color: #6279b8;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
} /*
.intro {
    float: left;
    margin-top: 4vw;
    width:25%;
}
.image{
    float: right;
}

.whole {
    position: sticky;
}
/* p   {
    text-align: center;
    color: #4ecdc4;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 88px;
    font-weight:800;
} */
#header {
    /* background-color: #ffe66d; V1 */
    /* background-color: #a2d2ff; V2 */
    background-color: #49516f;
   /* float: left; 
    margin-top: -40px; 
    height: 10%;
    width: auto;
    margin: 0;
    padding: 0; */
    position: sticky;
    top: 0;
   /* margin: 0 auto 0; */
    padding-top: 10px;
    margin: 0;
    height: 5vw;
    width: 100%;

}

img {display: block ;
     margin-left:auto; 
     margin-right:0vw;
     width:100%;
     max-width: 100%;
     max-height: auto;
     margin: 0;
}
.left {
    display: inline-flex;
    margin-right:auto;
    margin-left:100vw;
    max-width:100%;
    max-height: auto;
}


#footer {
    /* background-color: #ffe66d; V1  */
    /* background-color: #ffafcc;  V2 */
    background-color: #496f5d; 
   /* float: left; 
    margin-top: -40px; 
    height: 10%;
    width: auto;
    margin: 0;
    padding: 0; */
    position: sticky;
    bottom: 0;
    height: 5%;
    width: 100vw;
    padding-bottom: 0;
    margin: 0;

}
/* #center {
    padding: 8px;
     border-style: solid; 
    border-width: 3px; 
    /* border-color: #4ecdc4; V1*/
    /* border-color: #cdb4db; V2*/
   /* border-color: #8ea4d2; 
    border-radius: 22px;
    position: static;
    display: inline-flex;
    /* top: 40%; */ 
   /* transform: translate(0, 50);
    align-items: center;
    text-align:center;
    margin: auto;
    width: auto; 
    height: auto; } */
    /* text-align:center; */
   /* justify-content: center; */
    /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; */

/*#box {
    display: inline-block;
    position:absolute;
    left: 40%;
    

} */
/* * {
    box-sizing: border-box;
  }
  
  /* Position the image container (needed to position the left and right arrows) */
  /*.container {
    position: relative;
  }
  
  /* Hide the images by default */
  /*.mySlides {
    display: none;
  }
  
  /* Add a pointer when hovering over the thumbnail images */
/*  .cursor {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
 /* .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
 /* .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
 /* .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  /* Number text (1/3 etc) */
 /* .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* Container for image text */
 /* .caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
  }
  
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Six columns side by side */
 /* .column {
    float: left;
    width: 16.66%;
  }
  
  /* Add a transparency effect for thumnbail images */
  /*.demo {
    opacity: 0.6;
  }
  
  .active,
  .demo:hover {
    opacity: 1;
  } */