@font-face {
  font-family: 'Simon';
  src:  url(../resources/SimonsHandwriting-Bold.woff2) format('woff2'),
        url(../resources/SimonsHandwriting-Bold.woff) format('woff');
}


/* BASE
--------------------------------------------- */

body, html {
overflow: hidden;
font-family: Simon, Arial, sans-serif;
font-size: 100%;
}

body{
font-size: 100%;
-webkit-transition: .4s;
transition: .4s;

}

* {
margin:0;
padding:0;
}

/* LG CAPTIONS */
bold{font-weight: bold;
}

hints {font-size: 1em;}

/* SITE ELEMENTS
  --------------------------------------------- */

/* LIGHTGALLERY TWEAKS */

.lg-backdrop{
    opacity:0.8 !important;
    background-color: #fff!important;
}

.mystyle .lg-backdrop{
    opacity:0.8 !important;
    background-color: #000!important;
}

.lg-outer .lg-image {
    background: #fff!important;
    max-width: 85%!important;
    max-height: 85%!important;
    border: 1px solid #000;
    padding: 2px;   
}

.mystyle .lg-outer .lg-image {
    border: 1px solid #fff;
}

.lg-toolbar {
    z-index: 1082;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0)!important;
}

.lg-sub-html {
    background-color: rgba(0, 0, 0, 0)!important;
    color: #000!important;
    font-family: Simon, Arial, sans-serif!important;
    text-decoration: none;
    text-transform: uppercase;
    
}

.lg-sub-html p{
    font-size: 1em!important;
}

.lg-sub-html client{color: #0000ff;}

.lg-actions .lg-next, .lg-actions .lg-prev {
    background-color: rgba(0, 0, 0, 0)!important;
    /*color: #000!important;*/
    color: rgba(0, 0, 0, 0)!important;
    width: 22px!important;
    height: 44px!important;
    background-size: contain;
    background-repeat: no-repeat; 
}

/* LG NEXT */
.lg-actions .lg-next {
    right: 10px!important;
    background-image: url(../resources/arrow-next.png);
   }

.mystyle .lg-actions .lg-next {
    background-image: url(../resources/arrow-next-white.png);
   }
/* LG PREV */
.lg-actions .lg-prev {
    left: 10px!important;
    background-image: url(../resources/arrow-prev.png);
   }
.mystyle .lg-actions .lg-prev {
    background-image: url(../resources/arrow-prev-white.png);
   }

.lg-toolbar{margin-top:10px;}

/* fixed this style in original style sheet of lightgallery!*/
.lg-toolbar{
/*background: none;*/
}

.lg-toolbar .lg-icon {  background-color: transparent; }
/* CLOSE */

.lg-toolbar .lg-close {
    /*color: #000!important;*/
    color: rgba(0, 0, 0, 0)!important;
    width: 44px!important;
    height: 44px!important;
    background-size: contain;
    background-repeat: no-repeat; 
    background-image: url(../resources/close.png);
    margin-right: 10px;
   
}

.mystyle .lg-toolbar .lg-close {
    background-image: url(../resources/close-white.png);
    width: 44px!important;
    height: 44px!important;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;

}

/* ZOOM FIX */

#lg-zoom-in:after {
    background-image: url(../resources/zoom-in.png)!important;
    color: rgba(0, 0, 0, 0)!important;
    width: 44px!important;
    height: 44px!important;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

#lg-zoom-out:after {
    background-image: url(../resources/zoom-out.png)!important;
    color: rgba(0, 0, 0, 0)!important;
    width: 44px!important;
    height: 44px!important;
    background-size: contain;
    background-repeat: no-repeat;
  
}

.lg-video{border: 1px solid #000;
        }

.mystyle #lg-zoom-in:after {
    background-image: url(../resources/zoom-in-white.png)!important;
    color: rgba(0, 0, 0, 0)!important;
    width: 44px!important;
    height: 44px!important;
    background-size: contain;
    background-repeat: no-repeat;
}

.mystyle #lg-zoom-out:after {
    background-image: url(../resources/zoom-out-white.png)!important;
    color: rgba(0, 0, 0, 0)!important;
    width: 44px!important;
    height: 44px!important;
    background-size: contain;
    background-repeat: no-repeat;
}

.eastereggContainer{position:absolute;
                    margin:0px;
                    display: block;
}

#easteregg{background-image: url(../resources/easteregg.gif);
            background-color: transparent;
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
            pointer-events: auto;
            width: 40px;
            height: 40px;
            display: block;
            outline: none;
            border: none;
}

#easteregg:hover { cursor: pointer; 
                    pointer-events: auto; 
                    background-image: url(../resources/easteregg-hover.png)!important;
    }


#eastereggInfo{ position: absolute;
                top: 0px;
                left: 50px;
                background: url(../resources/easteregg-info.jpg);
                background-color: transparent;
                background-repeat: no-repeat;
                background-size: contain;
                display: none;
                width: 400px;
                height: 400px;
                margin:0px;
                transition: opacity 0.3s;
                -webkit-transition: opacity 0.3s;
                opacity: 0;
                }


#eastereggInfo img{width:100%;
                height: 100%;
                }

.site-header{ 
}

/*
  .logo {
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    position: fixed;
    top: .5em;
    left: 1em;
    z-index: 999;
    width: 245px;
    height: 60px;
    background-image: url(../resources/logo-image-2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

*/

.logo {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        position: fixed;
        top: .5em;
        left: 1em;
        z-index: 999;
        width: 245px;
        height: 60px;
        background-image: url(../resources/logo-image.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
}

/* SUB PAGES STYLES */

.aboutMe { font-size: 150%;
            
}

h3 {color: #0000ff;}

.clients, .projects{ 
            font-size: 150%;
            margin-top: 30px;
          
}


/*.clients li:before, .projects li:before { 
           content: "-";
}*/

.clients ul, .projects ul { list-style-type: "✏️ ";
                            list-style-position: outside;
                            margin: 0;
                            padding-left: 2em;
}

.clients a:link, .projects a:link {color: #0000ff;}
.clients a:visited, .projects a:visited {color: #0000ff;}
.clients a:hover, .projects a:hover{ color: #ff0000;}
.clients a:active, .projects a:active{ color: #ff0000;}

canvas{}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

  .parallax {
   
  }

   /* centre the content in the parallax layers */
  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

    .text {
    text-align: left;
    font-size: 200%;
        position: absolute;
  }



/* INFO TOGGLE */

.nav {
    position: fixed;
    top: .5em;
    right: 25px;
    z-index: 998;
    font-size: 100%;
   }


#info{
    display:none;
    clear: both;
    color: #000;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    opacity: 0;
    
}



/* old with text
.site-options{  
    font-size: 100%;
	margin-top: 0.5em;
    width: 245px;
    height: 60px;
}
*/

/* with padding and flex
.site-options{  
    background-image: url(../resources/info-image@2x.png);
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 100% 100%;
    box-sizing: border-box;
    overflow: hidden;
	margin-top: 0.5em;
    width: 245px;
    height: 60px;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    padding-right: 10px;   
}
*/

/* without padding 2x */
.site-options{  
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
	margin-top: 0.5em;
    width: 245px;
    height: 60px;
    display: flex;
    /*justify-content:space-between;*/
    justify-content:flex-end;
    align-items: center; 
}

/*
.site-options a{text-decoration: none;
letter-spacing: 0px;
font-size: 180%;
text-transform: uppercase;
color: #000;
 padding-left: 10px;
font-family: simon, arial, sans-serif; }
*/

.info-change-colors{
    background-image: url(../resources/info-image.png);
}

.info-email{
    background-image: url(../resources/email.png);
}


.email-link:hover .info-arrow {
     display: block;
}

.info-about{
   background-image: url(../resources/info-about.png); 
}

.about-link:hover .info-arrow {
     display: block;
}

.info-clients{
   background-image: url(../resources/info-clients.png); 
}

.clients-link:hover .info-arrow {
     display: block;
}

.info-arrow {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    width: 60px;
    height: 30px;
    background-image: url(../resources/info-arrow.gif);
    -webkit-transition: .2s;
    transition: .2s;
    background-size: contain;
    background-repeat: no-repeat;
    display: none;
}



/* OLD mit text
.checkbox_label{
    display: inline-block; 
    padding-right: 1em;
}
*/

#menu {
    cursor: pointer;
    pointer-events: auto;
    float:right;
    margin-bottom: 10px;
    padding: .5em;
    font-size: 100%;
    outline: none;
    -webkit-outline: none !important;
    -webkit-transition: .4s;
    transition: .4s;
    background-image: url(../resources/menu.png);
    width: 63px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    background-color: transparent;
    
  }
  
#menu:hover { cursor: pointer; 
            pointer-events: auto; 
            background-image: url(../resources/menu-close.png);
    }

.footer__info {
    display: none;
    font-size: 100%;
    position: absolute;
    z-index:100;
    bottom:0px;
    text-align:center;
    width: 98%;
    padding: 0px;
    margin: 0px;    
  }


  /* OVERLAY CAPTIONS ON IMG
  --------------------------------------------- */

.lazy img{width: 40px!important;
    height: 40px!important; 
    position: absolute;
    top: 50%; 
    left: 50%;
}

.png .yall-loaded {border: none!important;
      background: none!important;
}

.border{border: 1px solid #999;
        padding: 3px;}

.image-link:hover {color: #ff0000;
                    background: none!important;}

.image:nth-child(1n) {
    pointer-events: auto;
}

.parallax__layer:nth-child(1n) {
    pointer-events: auto;
}

.parallax__layer img:nth-child(1n) {
     pointer-events: auto;
}

.notes {
    position:absolute;
    margin:0px;
    pointer-events: none; 
    background-size: contain;
    background-repeat: no-repeat;
  
}

.notes img {
    width:100%;
    height: 100%;
    overflow: hidden;
    vertical-align:top;
    margin:0px;
}

/*
.deep-misc {
    position:absolute;
    margin:0px;
    pointer-events: none; 
    background-size: contain;
    background-repeat: no-repeat;
    width:100%;
    height: 100vh;
    max-height: 1080px;
}
*/
.deep-misc {
    width:100%;
    height: 100vh;
    max-height: 1080px;
    position:absolute;
    margin:0px;
    pointer-events: none; 
      background-attachment: scroll;
      background-repeat: repeat;
      background-image: url(../resources/pattern.gif);
}

.deep-misc img {
    width:100%;
    height: 100%;
    overflow: hidden;
    vertical-align:top;
    margin:0px;
}

.image-link{background: none!important;}

.image-link:after {
    background: none!important;
}

.thumb-container{   
    width:190px;
    position:absolute;
    margin:0px;
    box-sizing: content-box;
}

.thumb{margin-bottom: 10px;
        padding: 0px;
        float: left;
        background: #fff;

}

.thumb img {pointer-events: auto;
    width:100%;
    height: 100%;
    overflow: hidden;
    vertical-align:top;
    margin:0px;
            transition: all 0.5s;
        -webkit-transition: all 0.5s;
    opacity: 1;
}

.thumb:hover img {
     opacity: 0.5;
}


.image {
    pointer-events: auto;
    position:absolute;
    margin:0px;
    cursor: url("../resources/cursor.png"), url("../resources/cursor.cur"), default;
   /* cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
	*/
    /*border: 1px solid #000;*/
    box-sizing: content-box;
    background: #fff;

}

.image img {pointer-events: auto;
    width:100%;
    height: 100%;
    overflow: hidden;
    vertical-align:top;
    margin:0px;
}


.image:after, .image:before {
    
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    
    content:'\A';
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(255,255,255,0.4);
}
.image:before {
    
    content: attr(overlay-caption);
    width:100%;
    color:#000;
    *z-index:1;
    bottom:45%;
    text-align:center;
    font-size: 2em;
   }

.image:hover:after, .image:hover:before {
    opacity:1;
}

/* Parallax base styles
  --------------------------------------------- */

/** { box-sizing: border-box }*/

.parallax__layer img{

}

  .parallax {
    /*height: 500px;*/ /* fallback for older browsers */
    height: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;  
    /*-webkit-overflow-scrolling: touch;*/
  }

  .parallax__group {
    position: relative;
    /*height:100%;
    width: 100%;*/
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: relative;
    /* top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
  }

.parallax__group {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
  }

#start{width: 100%;
    height: 100%;
    display: block;
    position: relative;
    /*overflow: hidden;*/
    margin:0px;
}

#main img{
    padding: 0px;
    margin: 0px;
    width: 100vw;
    /*height: 100vh;*/
    
}

group0{}
#group1{top:100vh;}
#group2{top:200vh;}
#group3{top:300vh;
}

#group4{top:500vh;
}

#group5{top:600vh;
}

#group6{top:700vh;}


  .parallax__layer--fore {
    -webkit-transform: translateZ(50px) scale(.7);
    transform: translateZ(50px) scale(.7);
    z-index: 1;
  }

  .parallax__layer--notes {
    -webkit-transform: translateZ(140px) scale(0.5);
    transform: translateZ(140px) scale(0.5);
    z-index: 4;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 5;
  }

  .parallax__layer--content {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 5;
    left: 5%;
    top: 15vh;
    position:absolute;
    font-family: Simon, arial, sans-serif;
    color: #000;
    text-transform: uppercase;
    margin:0px;  
    width:80%;
  }

  .parallax__layer--easteregg {
   -webkit-transform: translateZ(150px) scale(0.4);
    transform: translateZ(150px) scale(0.4);
    z-index: 7;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
  }

  .parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
      z-index: 2;
}

  .parallax__layer--background {
    -webkit-transform: translateZ(-610px) scale(3);
    transform: translateZ(-610px) scale(3);
      z-index: 9;
}

/* CHECKBOX SLIDER */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 background-image: url(../resources/slider.png);
  background-color: #fff;
  -webkit-transition: .2s;
  transition: .2s;
background-size: contain;
background-repeat: no-repeat;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
background-image: url(../resources/slider-circle.png);
 /* background-color: white;*/
  -webkit-transition: .2s;
  transition: .2s;
    background-size: contain;
background-repeat: no-repeat;
}

input:hover + .slider {
  background-color: #0000ff;

}

input:checked + .slider {
  background-color: #000;

}

input:focus + .slider {
 /* box-shadow: 0 0 1px #000;*/
}

input:checked + .slider:before {
  background-image: url(../resources/slider-circle-white.png);
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
background-size: contain;
background-repeat: no-repeat;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Debugger styles - used to show the effect
  --------------------------------------------- */
#loading {
    position: fixed;
    top: 0;
    left: .5em;
    z-index: 999;
    background: rgba(0,0,0,.85);
    color: #fff;
    padding: .5em;
    border-radius: 0 0 5px 5px;
  }

  .debug {
    position: fixed;
    top: 0;
    left: .5em;
    z-index: 999;
    background: rgba(0,0,0,.85);
    color: #fff;
    padding: .5em;
    border-radius: 0 0 5px 5px;
  }
  .debug-on .parallax__group {
    -webkit-transform: translate3d(800px, 0, -800px) rotateY(50deg);
    transform: translate3d(700px, 0, -800px) rotateY(50deg);
 }
  .debug-on .parallax__layer {
    box-shadow: 0 0 0 2px #000;
    opacity: 0.9;
  }
  .parallax__group {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
  }

/* SIMPLE LIGHTBOX */
/*

.sl-wrapper .sl-navigation button {

      height: 44px;
      width: 22px;
}
      .sl-wrapper .sl-navigation button.sl-next {
          background-image: url(../resources/arrow-next.png);
          background-repeat: no-repeat;
          color: rgba(0,0,0,0);
          background-size: contain;
          
}
      .sl-wrapper .sl-navigation button.sl-prev {
          background-image: url(../resources/arrow-prev.png);
          background-repeat: no-repeat;
          background-size: contain;
          color: rgba(255,255,255,0);
 }

.sl-wrapper .sl-close {
    background-image: url(../resources/close.png);
    background-repeat: no-repeat;
    background-size: contain;
    color: rgba(0,0,0,0)!important;
    height: 44px;
    width: 44px;
}

.sl-wrapper-hack .sl-navigation button.sl-next {
          background-image: url(../resources/arrow-next-white.png);
          
}
.sl-wrapper-hack .sl-navigation button.sl-prev {
          background-image: url(../resources/arrow-prev-white.png);
 }

.sl-wrapper-hack .sl-close {
    background-image: url(../resources/close-white.png);
    color: rgba(0,0,0,0)!important;
}
.sl-overlay-hack {background:#000!important;}

.sl-wrapper{
    border-radius: 0px;
    outline: none !important;
    -webkit-outline: none !important;
    border: none !important;
    
}

.sl-prev, .sl-next{
    border-radius: 0px;
    outline: none !important;
    -webkit-outline: none !important;
    border: none !important;
}

.sl-overlay{opacity: 0.9!important;}

.sl-wrapper .sl-image .sl-caption.pos-outside {
        bottom: auto; 
        text-align: center;
}

.sl-wrapper .sl-image .sl-caption {
    background: none!important;
}

*/

/* CURSOR & BORDER IN LightBox */

.sl-image{
        cursor: url("../resources/zoom.png"), url("../resources/zoom.cur"), zoom-in;
        /*cursor: zoom-in;*/
        border: 1px solid #000;
        padding: 3px;
        background: #fff;
}

/* lazy fix */
.sl-image {
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
      }

/*.sl-wrapper .sl-image .sl-caption {
    color: #000!important;
    background: none!important;
}*/

/* MISC LIGHTBOX */

.lb-outerContainer {

  border-radius: 0px;
}

.lb-nav a.lb-prev, .lb-nav a.lb-next {
  opacity: 1;
}

.lb-nav a.lb-next {
  /*position: fixed;*/
    position: absolute;
  right: -70px;
  top: 0;
}
.lb-nav a.lb-prev {
  /*position: fixed;*/
    position: absolute;
  left: -70px;
  top: 0;
}

/*
.lb-dataContainer {
  left: 50%;
  position: absolute;
  top: -45px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}*/

/* SCROLLBAR */

/*
#default ::-webkit-scrollbar {
  width: 15px;
}

#default ::-webkit-scrollbar-track {
  background: #fff; 
} 

#default ::-webkit-scrollbar-thumb {
  background: #000; 
}

#default ::-webkit-scrollbar-thumb:hover {
  background: #0000ff; 
}
*/

/* COLOR TOGGLE */
/*
body .color-toggle::-webkit-scrollbar {
  width: 15px!important;
}

body .color-toggle::-webkit-scrollbar-track {
  background: #000!important; 
}
 
body .color-toggle::-webkit-scrollbar-thumb {
  background: #fff!important; 
}

body .color-toggle::-webkit-scrollbar-thumb:hover {
  background: #0000ff!important; 
}
*/


/* MOBILE STYLES */
@media only screen and (max-width: 1280px) {
    .image {
        max-width: 30%!important;
    }
   .thumb-container {
        max-width: 15%!important;
       left: 20%!important;
        
    }
    
}

@media only screen and (max-width: 800px) {
    .notes{ max-width: 50%;}
    .clients, .projects { 
            font-size: 100%;
    }
}

    
@media only screen and (max-width: 600px) {
    
    
hints {font-size: 0.8em;}

.notes{ max-width: 50%;}
    
.image {
    position:absolute; 
    max-width: 50%;
    }
    
.text {
    text-align: left;
    font-size: 100%!important;
    position: absolute;
    width:80%!important;
  }
    
.logo {
    width: 180px;
    height: 44px;
    }
    
.site-options{  
 
    width: 180px;
    height: 44px;
   
}
    
.info-arrow{
     width: 45px;
    height: 30px;
    }

#menu {
    width: 46px;
    height: 44px;
    }
    
.switch {
    margin-right: 5px;
  width: 45px;
  height: 26px;
}

.slider:before {
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
}

input:checked + .slider:before {
  background-image: url(../resources/slider-circle-white.png);
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

.eastereggContainer{ 
        left:5%!important;
    }
    
#eastereggInfo {max-width: 300px;}
    
/* SCROLLBAR */

    /*
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
background: #cfcfcf; 
}
    */

}

/* RETINA STUFF */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
	.logo {
		background-image: url(../resources/logo-image@2x.png);
	}
    .info-change-colors{
    background-image: url(../resources/info-image@2x.png);
    }
    .info-email{
    background-image: url(../resources/email@2x.png);
    }
    
    .info-about{
    background-image: url(../resources/info-about@2x.png); 
    }
    
    .info-clients{
    background-image: url(../resources/info-clients@2x.png); 
    }
    
    .info-arrow{url(../resources/info-arrow@2x.gif);
    }
    
    #menu {
		background-image: url(../resources/menu@2x.png);
	} 
    #menu:hover {
        background-image: url(../resources/menu-close@2x.png);
    }
    .sl-wrapper .sl-navigation button.sl-next {
          background-image: url(../resources/arrow-next@2x.png);     
    }
    .sl-wrapper .sl-navigation button.sl-prev {
              background-image: url(../resources/arrow-prev@2x.png);
     }
    .sl-wrapper .sl-close {
        background-image: url(../resources/close@2x.png);
    }
    .sl-wrapper-hack .sl-navigation button.sl-next {
          background-image: url(../resources/arrow-next-white@2x.png); 
    }
    .sl-wrapper-hack .sl-navigation button.sl-prev {
              background-image: url(../resources/arrow-prev-white@2x.png);
     }

    .sl-wrapper-hack .sl-close {
        background-image: url(../resources/close-white@2x.png);
    }
    #easteregg{background-image: url(../resources/easteregg@2x.gif);
            }
    #easteregg:hover {background-image: url(../resources/easteregg-hover@2x.png);
            }
    /* LIGHTGALLERY FIX */
    /* LG NEXT */
    .lg-actions .lg-next {
        background-image: url(../resources/arrow-next@2x.png);
       }

    .mystyle .lg-actions .lg-next {
        background-image: url(../resources/arrow-next-white@2x.png);
       }
    /* LG PREV */
    .lg-actions .lg-prev {
        background-image: url(../resources/arrow-prev@2x.png);
       }
    .mystyle .lg-actions .lg-prev {
        background-image: url(../resources/arrow-prev-white@2x.png);
       }

    /* CLOSE */

    .lg-toolbar .lg-close {
        background-image: url(../resources/close@2x.png);
    }

    .mystyle .lg-toolbar .lg-close {
        background-image: url(../resources/close-white@2x.png);
    }
}