@font-face {
        font-family: 'Cormorant Unicase';
        src: url('fonts/CormorantUnicase-Regular.eot');
        src: url('fonts/CormorantUnicase-Regular.eot?#iefix') format('embedded-opentype'),
            url('fonts/CormorantUnicase-Regular.woff2') format('woff2'),
            url('fonts/CormorantUnicase-Regular.woff') format('woff'),
            url('fonts/CormorantUnicase-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Metamorphous';
        src: url('fonts/Metamorphous.eot');
        src: url('fonts/Metamorphous.eot?#iefix') format('embedded-opentype'),
            url('fonts/Metamorphous.woff2') format('woff2'),
            url('fonts/Metamorphous.woff') format('woff'),
            url('fonts/Metamorphous.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    html{
        
      scroll-behavior: smooth;
    }
    * {
      box-sizing: border-box;
    }

    body {
      background-color: #111;
      color: white;
      padding: 0px;
      margin: 0px;
      font-size:100%;
    }


    #home .document .town_list a{
        font-family: 'Cormorant Unicase';
        font-style: normal;
        text-decoration: none;
        text-decoration-style: -moz-none;
    }

    h1{
        font-family: 'Cormorant Unicase';
        font-style: normal;
    }
    h2, h3 {
        font-family: 'Metamorphous';
        font-weight: normal; 
        clear:both;
        padding:0px;
        padding-top: 20px;
        margin: 0px;
        margin-bottom: 20px;
    }
    h2.first_header{
        margin: 80px 0px;
    }
    #header ,#foot {
        font-family: 'Metamorphous';
        font-weight: normal;
    }
    .image_caption {
        font-family: 'Metamorphous';
        font-weight: normal;
        font-size: 70%;
    }

p{
    padding-left:20px;
}
    p, #header h2{
        font-family: 'serif';
        font-style: normal;
        
    }
    h1{
        font-size: 225%;
    }
    h2{
        font-size: 150%;
    }
    h3{
        font-size: 100%;
    }
    a{
        color: white;
    }
    ul, li{
        list-style-type: none;
        padding:0px;
        margin: 0px;
    }
    ul.list, .list>li{
        list-style-type: unset;
        padding-left:20px;
    }
    h1#logo{

        width:100%;

        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    #header{
      -webkit-transition-property: background-color, filter;
      -webkit-transition-duration: 3s, 3s;
      text-align: center;
    padding: 10px;



    background-color: rgba(33, 33, 33, .5);

    display: table-row-group;
    position: absolute;


    z-index: 99;
    filter: blur(0px);
    }
    #header #nav{
    filter: blur(0px) !important;

    }
    #header hr{
    border:0.5px solid white;
    width:20%;
    }
    #home.page{
    position: relative;
    min-height: 50vh;
    }

    /* container */
    #page {
        display:block;
    }

    /* columns */
    #page > * {

    }

        #header{
            min-height: 100vh;
            width: 100%;
        }

    #sculpture{
    display:none;
    top:0px;
    right:0px;
    position:fixed;
    height:80%;
    }
    /* tablet breakpoint */
    /* tablet breakpoint */
    @media (min-width:1400px){
    #sculpture{
    display:block;
    display:none;
    width:10%;
    padding: 20px;
    margin:50px;
    background-color: #444;
    border-top-left-radius: 50px;
    }
    body{
      font-size:115%;
    }
    #logo{
      font-size:200%;
    }
    }
    @media (min-width:1650px){
    #sculpture{
    width:20%;
    }
    }
    @media (max-width:767px){
    /* small screen */
    .photo{
    float: none !important;
    margin: 0px !important;
    width:100% !important;
            
    }

p{
    padding-left:0px;
}
    #foot{
        position: relative ;
        bottom:0px ;
        z-index: 111;
    }
        #quotes{
            display: none;
        }
        div #home .document{
        	margin:0px;
        	border-radius: 0px;

        }
    div #slideshow {
      position: relative ;
      width: 100%;
      height: 75vh;
      overflow: hidden;

    }
    div #header {

      position: fixed ;
    }
    }
    @media (min-width:768px) {
    .photo{
    float: none    ;
    margin: 0px ;
    width:100% ;
            
    }
    #foot{
        position: relative;
        bottom:0px;
        z-index: 111;
    }
        #page {
            min-height: 100vh;
    position: relative;
            display: grid;
            grid-template-columns: 1fr 2fr;

            
        }

        /*big screens*/
    div #slideshow {
      position: fixed ;

      height: 100%;
      overflow: hidden;
    width:40%;

    left:0px;
    }




        #header{




    display: table-row-group;


    filter: blur(0px) !important;
    position: relative;
        width:initial;

            min-height: 100vh; 



        }
    .document{
    	box-shadow: 10px 10px 30px rgba(0,0,0,0.2);
    }

    #header img, 
    #header h1, 
    #header hr {
    filter: blur(0px) !important;
    }

    }






    .photo{
    background-color: rgba(0, 0, 0, 0.75);
    border: 1px solid #333;
    padding:10px;
    width: 50%;
    }
    .photo img{
    max-width: 100%;
    }
    .photo p, .photo a{
        padding:0px;
        margin: 0px;
    }
    .photo a{
        
        text-decoration:none !important;
    }
    .photo p{
        padding:5px 0px;
        text-align: center;
    }
    .image_right{
    float:right;
    margin-left: 20px;
    }

    .image_left{
    float:left;
    margin-right: 20px;
    }

    #location.document .first_header, #geology.document .first_header, .landscape_document .first_header{
        padding-top:120px;
    }
    #location.document, #geology.document, .landscape_document{
        background-position: top right;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .landscape_document{
        background-image: url('images/geo_bg_lq.png');;
    }
    #location.document{
        background-image: url('images/from_plane.png');
    }
    #geology.document{
        background-image: url('images/statue_silhouette.png');
        background-size: 100%;
        background-position-y: -100px;
        background-position-x: 100px;
    }
    .landscape_document .quote{
        font-style: italic;
        max-width: 50%;
    }

    #header h2{
        margin:25px 0px;
        font-size: 100%;
    }
    #slideshow {
      position: fixed ;
      width: 100%;
      height: 100%;
      overflow: hidden;

    }
    .fadeaway{
    background-color: rgba(33, 33, 33, .2) !important;
    }
    #header img, 
    #header h1, 
    #header hr {
      -webkit-transition-property: filter;
      -webkit-transition-duration: 10s;
    }
    .fadeaway img, 
    .fadeaway h1, 
    .fadeaway hr {
    filter: blur(10px) !important;
    }
    .fresh img, 
    .fresh h1, 
    .fresh hr {
    filter: blur(0px) !important;
    }
    .fresh{
    background-color: rgba(33, 33, 33, .4) !important;
    filter: blur(0px) !important;
    }
    #header > a:hover {
        text-decoration: underline double rgba(255, 255, 255, .5) ;
    }



    #slideshow > div {
        position: absolute;
        background-size: cover;
        width:100%;
        height:100%;
      opacity: 0;
      -webkit-transition-property: opacity, -webkit-transform;
      -webkit-transition-duration: 3s, 10s;
      -moz-transition-property: opacity, -moz-transform;
      -moz-transition-duration: 3s, 10s;
      -ms-transition-property: opacity, -ms-transform;
      -ms-transition-duration: 3s, 10s;
      -o-transition-property: opacity, -o-transform;
      -o-transition-duration: 3s, 10s;
      transition-property: opacity, transform;
      transition-duration: 3s, 10s;
    }


    #slideshow .fx:first-child + div ~ div {
      z-index: -1;
    }

    /**
     * Because images are styled with a different point of origin, the following rule will create different panning effects.
     */

    #slideshow .fx {
      opacity: 1;
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
    }


    #
    @font-face {
        font-family: 'Cormorant Unicase';
        src: url('fonts/CormorantUnicase-Regular.eot');
        src: url('fonts/CormorantUnicase-Regular.eot?#iefix') format('embedded-opentype'),
            url('fonts/CormorantUnicase-Regular.woff2') format('woff2'),
            url('fonts/CormorantUnicase-Regular.woff') format('woff'),
            url('fonts/CormorantUnicase-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Metamorphous';
        src: url('fonts/Metamorphous.eot');
        src: url('fonts/Metamorphous.eot?#iefix') format('embedded-opentype'),
            url('fonts/Metamorphous.woff2') format('woff2'),
            url('fonts/Metamorphous.woff') format('woff'),
            url('fonts/Metamorphous.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    html{
        
      scroll-behavior: smooth;
    }
    * {
      box-sizing: border-box;
    }

    body {
      background-color: #111;
      color: white;
      padding: 0px;
      margin: 0px;
      font-size:100%;
    }



    h1{
        font-family: 'Cormorant Unicase';
        font-style: normal;
    }
    h2 {
        font-style: normal;
        font-family: 'Cormorant Unicase';
    }
    h3 {
        font-family: 'Metamorphous';
        font-weight: normal; 
        clear:both;
        padding:0px;
        padding-top: 20px;
        margin: 0px;
        margin-bottom: 20px;
    }
    h2.first_header{
        font-family: 'Metamorphous';
        margin: 80px 0px;
    }
    #header ,#foot {
        font-family: 'Metamorphous';
        font-weight: normal;
    }
    .image_caption {
        font-family: 'Metamorphous';
        font-weight: normal;
        font-size: 70%;
    }


    p, #header h2{
        font-family: 'serif';
        font-style: normal;
        letter-spacing: 0.5px;
        color: #cccccf;
    }
    h1{
        font-size: 225%;
    }
    h2{
        font-size: 200%;
    }
    h3{
        font-size: 100%;
    }
    a{
        color: white;
    }
    ul, li{
        list-style-type: none;
        padding:0px;
        margin: 0px;
    }
    ul.list, .list>li{
        list-style-type: unset;
        padding-left:20px;
    }
    h1#logo{

        width:100%;

        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
    #header{
      -webkit-transition-property: background-color, filter;
      -webkit-transition-duration: 3s, 3s;
      text-align: center;
    padding: 0px;

/*background-color: rgba(33, 33, 33, 0.4);*/

background: unset !important;;
background-color: transparent !important;;

    display: table-row-group;
    position: absolute;


    z-index: 99;
    filter: blur(0px);
    }
    #header>span{
display: block;
    padding: 10px;
    padding-bottom:0px;
    /*
    */
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.7) 0%,rgba(33, 33, 33, 0.65) 50%, rgba(33, 33, 33, 0.4) 80%, rgba(55, 55, 55, 0) 100%);

    }
    #header #nav{
    filter: blur(0px) !important;

    }
    #header hr{
    border:0.5px solid white;
    width:20%;
    }
    #home.page{
    position: relative;
    min-height: 50vh;
    }

    /* container */
    #page {
        display:block;
    }

    /* columns */
    #page > * {

    }

        #header{
            min-height: 100vh;
            width: 100%;
        }

    #sculpture{
    display:none;
    top:0px;
    right:0px;
    position:fixed;
    height:80%;
    }

    /* tablet breakpoint */
    /* tablet breakpoint */
    @media (min-width:1400px){
    #sculpture{
    display:block;
    display:none;
    width:10%;
    padding: 20px;
    margin:50px;
    background-color: #444;
    border-top-left-radius: 50px;
    }
    body{
      font-size:115%;
    }
    }
    @media (min-width:1650px){
    #sculpture{
    width:20%;
    }
    }
    @media (max-width:767px){
    /* small screen */
    .photo{
    float: none !important;
    margin: 0px !important;
    width:100% !important;
            
    }
    #location.document .first_header, #geology.document .first_header, .landscape_document .first_header{
        padding-top:0px;
    }
    .landscape_document .quote{
        max-width: 100%;
    }
    #foot{
        position: relative !important;
        bottom:0px !important;
        z-index: 111;
    }
        #quotes{
            display: none;
        }
        div #home .document{
            margin:0px;
            border-radius: 0px;

        }
    div #slideshow {
      position: relative ;
      width: 100%;
      height: 95vh;
      max-height: 600px;
      overflow: hidden;

    }
    div #header {

      position: fixed ;
    }
    #home .document{

        background-color: #222 !important;
        backdrop-filter: unset !important;
       
    }
    }
    @media (min-width:768px) {

    #foot{
        position: relative;
        bottom:0px;
        z-index: 111;
    }
        #page {
            min-height: 100vh;
    position: relative;
            display: grid;
            grid-template-columns: 1fr 2fr;

            
        }

        /*big screens*/
    div #slideshow {
      position: fixed ;

      height: 100%;
      overflow: hidden;
    width:40%;

    left:0px;
    }




        #header{




    display: table-row-group;


    filter: blur(0px) !important;
    position: relative;
        width:initial;

            min-height: 100vh; 



        }
    .document{
        box-shadow: 10px 10px 30px rgba(0,0,0,0.2);
    }

    #header img, 
    #header h1, 
    #header hr {
    filter: blur(0px) !important;
    }

    }






    .photo{
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: ou;
    border: 0px solid #333;
    padding:10px;
    width: 50%;
    }
    .photo img{
    max-width: 100%;
    }
    .photo p, .photo a{
        padding:0px;
        margin: 0px;
    }
    #home .document .photo a{
        
        text-decoration:none !important;
    }
    .photo p{
        padding: 0px;
        padding-top:5px;
        text-align: center;
    }
    .image_right{
    float:right;
    margin-left: 20px;
    }

    .image_left{
    float:left;
    margin-right: 20px;
    }





    #header h2{
        margin:25px 0px;
        font-size: 100%;
    }
    #slideshow {
      position: fixed ;
      width: 100%;
      height: 100%;
      overflow: hidden;

    }
    .fadeaway{
    background-color: rgba(33, 33, 33, .2) !important;
    }
    #header img, 
    #header h1, 
    #header hr {
      -webkit-transition-property: filter;
      -webkit-transition-duration: 10s;
    }
    .fadeaway img, 
    .fadeaway h1, 
    .fadeaway hr {
    filter: blur(10px) !important;
    }
    .fresh img, 
    .fresh h1, 
    .fresh hr {
    filter: blur(0px) !important;
    }
    .fresh{
    background-color: rgba(33, 33, 33, .4) !important;
    filter: blur(0px) !important;
    }
    #header > a:hover {
        text-decoration: underline double rgba(255, 255, 255, .5) ;
    }


    /**
     * Styling the images
     *
     * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.
     * Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.
     * Finally, we set the transition (property and duration). Note that duration values are different for opacity and transform as we want the "fade-in" effect to be faster than the "panning" effect.
     */

    #slideshow > div {
        position: absolute;
        background-size: cover;
        width:100%;
        height:100%;
      opacity: 0;
      -webkit-transition-property: opacity, -webkit-transform;
      -webkit-transition-duration: 3s, 10s;
      -moz-transition-property: opacity, -moz-transform;
      -moz-transition-duration: 3s, 10s;
      -ms-transition-property: opacity, -ms-transform;
      -ms-transition-duration: 3s, 10s;
      -o-transition-property: opacity, -o-transform;
      -o-transition-duration: 3s, 10s;
      transition-property: opacity, transform;
      transition-duration: 3s, 10s;
    }

    /**
     * We change the point of origin using four corners so images do not move in the same direction. 
     * This technique allows us to create various paths while applying the same translate() values to all images (see the 'fx' class further below).
     */



    #slideshow :nth-child(1) {
        background-position: top center;
      -webkit-transform-origin: top center;
      -moz-transform-origin: top center;
      -ms-transform-origin: top center;
      -o-transform-origin: top center;
      transform-origin: top center;
    }

    #slideshow :nth-child(2) {
      -webkit-transform-origin: bottom center;
      -moz-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
      -o-transform-origin: bottom center;
      transform-origin: bottom center;
      background-position: 100% 50%;
    }

    #slideshow :nth-child(3) {
      -webkit-transform-origin: bottom right;
      -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
      -o-transform-origin: bottom right;
      transform-origin: bottom right;
    }

    #slideshow :nth-child(4) {
      -webkit-transform-origin: bottom center;
      -moz-transform-origin: bottom center;
      -ms-transform-origin: bottom center;
      -o-transform-origin: bottom center;
      transform-origin: bottom center;
    }

    #slideshow  :nth-child(5) {
      -webkit-transform-origin: bottom right;
      -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
      -o-transform-origin: bottom right;
      transform-origin: bottom right;
    }

    #slideshow  :nth-child(6) {
      -webkit-transform-origin: right center;
      -moz-transform-origin: right center;
      -ms-transform-origin: right center;
      -o-transform-origin: right center;
      transform-origin: right center;
    }
    #slideshow  :nth-child(7) {
      -webkit-transform-origin: right center;
      -moz-transform-origin: right center;
      -ms-transform-origin: right center;
      -o-transform-origin: right center;
      transform-origin: right center;
    }

    /**
     * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one. 
     * The rule below moves all images past the second one down the stack. 
     * This is because the second image needs to show on top of the first one when it transitions in.
     */

    #slideshow .fx:first-child + div ~ div {
      z-index: -1;
    }

    /**
     * Because images are styled with a different point of origin, the following rule will create different panning effects.
     */

    #slideshow .fx {
      opacity: 1;
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
    }

    #home > div:nth-child(2){
    }






    #home .document{
        padding:30px;


        position:relative;
        z-index: 99;

        background-color: rgba(33, 33, 33, .50);
        backdrop-filter: blur(200px);
       
        font-size: 125%;
    }


    #home .document a, #home #quotes a{
                    color:rgba(160,250,160,1) !important;
        text-decoration-line: underline !important;
    }

    #home .document a:hover, #home #quotes a:hover{
          color: white !important;
        
        text-decoration-line: none !important;
    }

    #foot {
        background-color:black;
        width:100%;

            position: absolute;
           height: 700px;
    bottom: -700px;
    padding: 50px;
    text-align: center;
    }
    #foot ul li{ list-style-type:none; display:inline;
            z-index: 99;
            display: contents;

        }
    iframe:hover, 
    iframe:active{
        filter: saturate(100%) !important;
    }
        .route_map{
            float:left;
            min-width: 300px;
            max-width:30vw;
            padding-right: 30px;
        }
        .elevation{
            max-height:20px;
            padding-right:10px;
        }
    .route_icon{
        display:inline-block;
        width:25px;
        padding-right: 5px;

    }
    .route_link{


    } {
    	background-color:black;
    	width:100%;
    	height:600px;
            position: absolute;
    border: ;
    bottom: -600px;
    padding: 50px;
    text-align: center;
    }
    #foot ul li{ list-style-type:none; display:inline;
            z-index: 99;
            display: contents;

        }
    iframe:hover, 
    iframe:active{
    	filter: saturate(100%) !important;
    }
        .route_map{
        	float:left;
        	min-width: 300px;
        	max-width:30vw;
        	padding-right: 30px;
        }
        .elevation{
        	max-height:20px;
        	padding-right:10px;
        }
    .route_icon{
    	display:inline-block;
    	width:25px;
    	padding-right: 5px;
    }
    .route_link{

    }
    .document{
        box-shadow: 0px 0px 40px black;
    }

.btn {
  display: block;
  height: 70px;
  color: white;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  font-size: 20px;
  text-align: center;
  
  &:after {
    position: absolute;
    content:'';
    display: inline-block;
    background: rgba(59,173,227,1);
    background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    height: 50px;
    width: 372px;
    z-index: -1;
    transform: translateX(-375px);
    transition: transform 400ms ease-in;
  }
  
  &:hover {
    &:after {
      transform: translateX(-200px);
    }
  }
  span {
    position: relative;
    top: 16px;
  }
}



  a{
   -webkit-transition-property: color;
    -webkit-transition-duration: 0.5s;
}
            a:hover{
                text-decoration-style: double;
                color:rgba(160,250,160,1) !important;
            }
#header a {
    text-decoration: none;

}
#nav a {

   font-family: 'Metamorphous';
   padding:10px;
   display:inline-block;
   font-size: 120%;
   color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 2px 4px #000;
}