@font-face {
   font-family: 'Neue Haas Grotesk';
   font-style: normal;
   font-weight: normal;
   src: url('/fonts/neuehaasgrotdisp-55.eot?#iefix') format('embedded-opentype');
   url('/fonts/neuehaasgrotdisp-55.woff2') format('woff2');
   url('/fonts/neuehaasgrotdisp-55.woff') format('woff');
   url('/fonts/neuehaasgrotdisp-55.ttf') format('truetype');
   url('/fonts/neuehaasgrotdisp-55.svg#Neue Haas Grotesk') format('svg');
   line-height: 1.4;
}

img {
    overflow-clip-margin: content-box;
    overflow: clip;
    overflow-x: ;
    overflow-y: ;
}

.e-resize{ 
   cursor: e-resize; 
   }

   .w-resize        
   { cursor: w-resize; 
   }

.mob-foot,
.mob-foot-right,
.mob-info {
   display: none;
}

html {
   scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
   border: 0;
   font-size: 100%;
   font: inherit;
   margin: 0;
   padding: 0;
   vertical-align: baseline;
}

h3 {
   font-size: 14px;
}

h2 {
   font-size: 30px;
}

h1 {
   font-size: 20px;
   font-weight: 700;
}

p {
   font-size: 20px;
   font-weight: normal;
}

body {
   font: 400 20px/1 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #eeeeee;
   background-color: #0d1028;
   -webkit-text-size-adjust: 100%;
   -webkit-font-feature-settings: 'kern' 1;
   -moz-font-feature-settings: 'kern' 1;
   -o-font-feature-settings: 'kern' 1;
   font-feature-settings: 'kern' 1;
   font-kerning: normal;
   /* Smooth the font on the level of the pixel, as opposed to the subpixel */
   -webkit-font-smoothing: antialiased;
   /* we add some padding top to create the space
  for our fixed header to sit inside of */
   padding-top: 100px;
}

a {
   color: #eeeeee;
   text-decoration: none;
}

a:active {
   color: rgba(255, 140, 105);
}

header {
   /*   overflow: hidden; */
   border-top: solid 5px salmon;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding: 96px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header h1 {
   /*   float: left; */
   width: 64px;
}

header nav a {
   margin-left: 40px;
   transition: border 0.3s ease-in;
   border-bottom: solid 2px rgba(0, 0, 0, 0);
   /* This padding determines the spaces between the link and the underline*/
   padding-bottom: 3px;
}

header nav a:hover {
   border-color: #725df5;
}

.selected {
   border-bottom: solid 2px rgba(255, 140, 105);
   padding-bottom: 3px;
   font-weight: 700;
}

.photos {
   /*   text-align: center; */
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}

.photo {
   /* inline block gives us a the best of both inline and block
  elements allowing us to stack them side by side and also 
  align our elements vertically in the row*/
   /*   display: inline-block; */
   width: 300px;
   margin: 10px;
   /* we can use vertical align to align or rows to bottom/middle/top   */
   /* vertical-align: top; */
   /* by using position relative on the parent photo element, our
  overlay will be positioned in relation to it */
   position: relative;
}

.overlay {
   /* by using absolute position we can position things in relation
  to the page or other parent elements */
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /* we can specify colours using rgb values, and in this case 
  we can also control the 'alpha' channel which is for transparency */
   background-color: rgba(28, 28, 28, 0.7);
   opacity: 0;
   transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 1;
   border-radius: 5px;
}

.photo:hover .overlay {
   opacity: 1;
   cursor: pointer;
}

.photo h2 {
   position: absolute;
   left: 15px;
   top: 15px;
   font-size: 20px;
   line-height: 1.2;
   border-bottom: solid 2px rgba(255, 140, 105);
   padding-bottom: 3px;
   font-weight: 700;
   color: #eeeeee;
}

.small {
   width: 220px;
}

.large {
   width: 300px;
}

.small img,
.large img {
   border-radius: 5px;
}

.small:hover img,
.large:hover img {
   border-radius: 5px;
   -webkit-box-shadow: 0 0 0 4px salmon;
   box-shadow: 0 0 0 4px salmon;
}

.folio {
   width: 860px;
}

.folio img {
   border-radius: 5px;
}

.folio-last {
   padding-bottom: 92px;
}


/*shop Test*/

.shop {
   position: fixed;
   width: 64px;
   left: 96px;
   top: 254px;
   transition: all 1s ease-in-out;
}

.shop:hover {
   transform: rotate(360deg);
}


/*shop Test*/

div.loading {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(114, 93, 245);
   z-index: 3;
   /*This centres the content to the page */
   display: flex;
   justify-content: center;
   align-items: center;
   transition: opacity 1s;
}

div.loading img {
   animation: rotate 2s infinite linear;
   width: 84px;
}

div.loading.hidden {
   opacity: 0;
   pointer-events: none;
}

@keyframes rotate {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

footer {
   position: fixed;
   bottom: 0;
   width: 100vw;
   height: 80px;
   padding: 90px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: solid 5px #725df5;
   z-index: 0;
}

footer a {
   transition: border 0.3s ease-in;
   border-bottom: solid 2px transparent;
   /* This padding determines the spaces between the link and the underline*/
   padding-bottom: 3px;
}

footer a:hover {
   border-bottom: solid 2px #725df5;
}

.list {
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
   font-size: 48px;
   line-height: 1.4;
   margin-top: 100px;
}

.list a img {
   opacity: 0;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 500px;
   /* is this will tell the browser to ignore any default mouse 
  interactions on this img element */
   pointer-events: none;
   transition: opacity 0.3s;
}

.list a:after {
   content: '/';
}


/* but not the last one! */

.list a:last-child:after {
   content: '';
}

.list a:hover img {
   opacity: 1;
}

.list a {
   transition: color 0.3s;
}

.list:hover a {
   color: #725df5;
}

.list a:hover {
   color: #eeeeee;
}


/*This allows me to change the selected text highlight color*/

::selection {
   background-color: #725df5;
   color: #EEEEEE;
}


/*This allows me to change the selected text highlight color*/


/*here I've decided to add the same code as applied to the above list style, just without a comma after links and I've made the 
width slighly bigger to improve legibilty*/

.info-list {
   max-width: 640px;
   margin-left: auto;
   margin-right: auto;
   font-size: 48px;
   line-height: 1.4;
   /*  margin-top: 100px; */
}

.page-info {
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
   font-size: 48px;
   line-height: 1.4;
   margin-bottom: 60px;
   z-index: auto;
}

.page-info a {
   border-bottom: solid 2px rgba(255, 140, 105);
   padding-bottom: 3px;
   font-weight: 700;
}

.page-info a:hover {
   border-color: #725df5;
}

/*Test*/
section.info-list.fade-in2 a {
   position: relative;
}

.info-list a img {
   opacity: 0;
   position: absolute;
  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  max-width: 420px;
   pointer-events: none;
   border-radius: 10px;
   width: 300px;
   transition: opacity 0.8s;
  z-index: 3;
}
/*Test*/
.info-list a:hover img {
   opacity: 1;
}

.info-list a {
   color: #725df5;
   cursor: pointer;
}

.info-list a:hover {
   color: rgb(255, 140, 105);
/* Change If needed */
      transition: color .3s cubic-bezier(.645,.045,.355,1);
  /* Change If needed */
   line-height: 1.4;
}

/*here I've decided to add the same code as applied to the above list style, just without a comma after links and I've made the 
width slighly bigger to improve legibilty*/

.fade-in {
   animation: fadeIn ease 3s;
   -webkit-animation: fadeIn ease 3s;
   -moz-animation: fadeIn ease 3s;
   -o-animation: fadeIn ease 3s;
   -ms-animation: fadeIn ease 3s;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-moz-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-webkit-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-o-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-ms-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

.fade-in2 {
   animation: fadeIn ease 6s;
   -webkit-animation: fadeIn ease 6s;
   -moz-animation: fadeIn ease 6s;
   -o-animation: fadeIn ease 6s;
   -ms-animation: fadeIn ease 6s;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-moz-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-webkit-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-o-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@-ms-keyframes fadeIn {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@media (max-width: 1480px) {
   header {
      padding: 40px;
   }
   .info-list a {
      pointer-events: none;
      color: #eeeeee;
   }
   .info-list h3 a {
      pointer-events: all;
      color: #725df5;
   }
   body {
      padding-top: 200px;
   }
   footer {
      display: none;
   }
}

@media (max-width: 1024px) {
   .info-list a {
      pointer-events: none;
      color: #eeeeee;
   }
   .info-list h3 a {
      pointer-events: all;
      color: #725df5;
   }
   @media (max-width: 768px) {
      header {
         padding: 20px;
         z-index: 2;
      }
      .mob-foot {
         display: flex;
         justify-content: space-between;
         align-items: center;
         float: left;
         height: 100px;
         margin-left: 40px;
      }
      .mob-foot-right {
         display: flex;
         justify-content: space-between;
         align-items: center;
         float: right;
         height: 100px;
         margin-right: 40px;
      }
      .mob-info {
         display: flex;
         justify-content: space-between;
         align-items: center;
         float: left;
         height: 100px;
      }
      .photo {
         margin-left: 0;
      }
      header nav a:hover {
         border: none;
         pointer-events: inherit;
      }
      .info-list a {
         pointer-events: none;
         color: #eeeeee;
      }
      .page-info {
         margin-top: 10px;
         margin-bottom: 20px;
      }
      .shop {
         display: none;
      }
      .info-list h2 {
         width: 95%;
         font-size: 20px;
      }
      .info-list h3 a {
         pointer-events: all;
         color: #725df5;
      }
      .folio-last {
         padding-bottom: 20px;
      }
      footer {
         display: none;
      }
      footer {
         background-color: #725df5;
         border-bottom: solid 5px rgba(255, 140, 105);
         padding: 20px;
      }
      body {
         margin: 15px;
         padding-top: 100px;
      }
   }