/* WEARABLES LIKE WATCHES */

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}


/* IPHONES */
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    /* #about, #manifesto, #colors, #info, #impressum {
        margin-top: 60vh;
        margin-left: 20vw;
        overflow-x: scroll;
        height: fit-content;
        margin-right: 5%;
        margin-bottom: 5%;
        font-size: 0.7rem;
        } */

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 


}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}


/* IPADS */

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}


/* LAPTOPS */


/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}









/* MORE BASIC QUERIES */
@media screen and (max-width: 600px)
/* and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi)  */
{ 
    /* //For Tablets */
    /* #about, #manifesto, #colors, #info, #impressum {
        margin-top: 20vh;
        margin-left: 20vw;
        overflow-x: scroll;
        height: fit-content;
        margin-right: 5%;
        margin-bottom: 5%;
        font-size: 0.5rem;
    } */
        /* body {
          background-color: rgb(0, 211, 248);
        } */
        #about, #manifesto, #colors, #info, #impressum {
          margin-top: 10vh;
          margin-left: 50vw;
          /* overflow-x: scroll; */
          height: fit-content;
          margin-right: 5%;
          margin-bottom: 5%;
          font-size: 1.1rem;
          line-height: 1.1;
          }

          .description {

            width: 70vw;
            height: 100vh;
            right:0;
            left:40vw;
            /* top:20; */
            position: fixed;
            background-color: white;
            transition-property: transform;
            mix-blend-mode: exclusion;
            z-index: 1000;
        -webkit-transition: transform 0.8s;
        -moz-transition: transform 0.8s;
        -o-transition: transform 0.8s;
        transition: transform 0.8s ease-in-out;
        padding: 5%;
        overflow: auto;
        margin: 0;
        position: fixed;
        top: 0;
        opacity: 0.7;
        font-size: 1.1em;
        line-height: 1.1;
        
        }
        .splash {
          width: 100vw;
           height: 100vh;
           background-color: black;
           margin: 0;
           color: white;
           font-size: 1rem;
           line-height: 1;
           z-index: 111000;
           position: fixed;
           padding: 5%;
           padding-top: 2%;
           overflow: none;
           transition: transform 0.8s ease-in-out;
           /* cursor: url(../img/ENTER.png) 100 50, auto; */
           object-position: center;
           pointer-events: all;
          
           overflow: auto;
       
       
       }
       .canvas-box1, .canvas-box2, .canvas-box3, .canvas-box4, .canvas-box5, .canvas-box12, .canvas-box13, .canvas-box14 {
       
        width: 200vw;
        transform: translate(-50vw, 10%);
    }

    }



@media screen and (min-width: 600px)
/* and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi)  */
{ 
    /* //For Tablets */
    /* #about, #manifesto, #colors, #info, #impressum {
        margin-top: 20vh;
        margin-left: 20vw;
        overflow-x: scroll;
        height: fit-content;
        margin-right: 5%;
        margin-bottom: 5%;
        font-size: 0.5rem;
    } */
        /* body {
          background-color: yellowgreen;
        } */
        #about, #manifesto, #colors, #info, #impressum {
          margin-top: 10vh;
          margin-left: 30vw;
          /* overflow-x: scroll; */
          height: fit-content;
          margin-right: 5%;
          margin-bottom: 5%;
          font-size: 1.3rem;
          line-height: 1.1;
          }


          .description {

            width: 50vw;
            height: 100vh;
            right:0;
            left:50vw;
            /* top:20; */
            position: fixed;
            background-color: white;
            transition-property: transform;
            mix-blend-mode: exclusion;
            z-index: 1000;
        -webkit-transition: transform 0.8s;
        -moz-transition: transform 0.8s;
        -o-transition: transform 0.8s;
        transition: transform 0.8s ease-in-out;
        padding: 5%;
        overflow: auto;
        margin: 0;
        position: fixed;
        top: 0;
        opacity: 0.7;
        font-size: 1.3em;
        line-height: 1.1;
        
        }

        .splash {
          width: 100vw;
           height: 100vh;
           background-color: black;
           margin: 0;
           color: white;
           font-size: 2rem;
           line-height: 1;
           z-index: 111000;
           position: fixed;
           padding: 5%;
           padding-top: 2%;
           overflow: none;
           transition: transform 0.8s ease-in-out;
           cursor: url(../img/ENTER.png) 100 50, auto;
           object-position: center;
           overflow: auto;
           pointer-events: all;
          
       
       }
       .canvas-box1, .canvas-box2, .canvas-box3, .canvas-box4, .canvas-box5, .canvas-box12, .canvas-box13, .canvas-box14 {
        width: 400vw;
        transform: translate(-150vw, 0%);
    }
      
    }
    
    @media screen and (min-width: 768px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi)  {
    /* //For Laptops */
    /* #about, #manifesto, #colors, #info, #impressum {
        margin-top: 20vh;
        margin-left: 20vw;
        overflow-x: scroll;
        height: fit-content;
        margin-right: 5%;
        margin-bottom: 5%;
        font-size: 1rem;
    } */
    /* body {
      background-color: #df2b13;
    } */

  .description {

    width: 50vw;
    height: 100vh;
    right:0;
    left:50vw;
    /* top:20; */
    position: fixed;
    background-color: white;
    transition-property: transform;
    mix-blend-mode: exclusion;
    z-index: 1000;
-webkit-transition: transform 0.8s;
-moz-transition: transform 0.8s;
-o-transition: transform 0.8s;
transition: transform 0.8s ease-in-out;
padding: 3%;
overflow: auto;
margin: 0;
position: fixed;
top: 0;
opacity: 0.7;
font-size: 1.5em;
line-height: 1.1;

}
.splash {
  width: 100vw;
   height: 100vh;
   background-color: black;
   margin: 0;
   color: white;
   font-size: 2rem;
   line-height: 1;
   z-index: 111000;
   position: fixed;
   padding: 5%;
   padding-top: 2%;
   overflow: none;
   transition: transform 0.8s ease-in-out;
   cursor: url(../img/ENTER.png) 100 50, auto;
   object-position: center;
   overflow: auto;
   pointer-events: all;


}
.canvas-box1, .canvas-box2, .canvas-box3, .canvas-box4, .canvas-box5, .canvas-box12, .canvas-box13, .canvas-box14 {
  width: 400vw;
  transform: translate(-150vw, 0%);
}


      
    }
    
    @media screen and (min-width: 992px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi)  {
    /* //For Large Laptops */
    /* #about, #manifesto, #colors, #info, #impressum {
        margin-top: 20vh;
        margin-left: 20vw;
        overflow-x: scroll;
        height: fit-content;
        margin-right: 5%;
        margin-bottom: 5%;
        font-size: 1.5rem;
    } */
    /* body {
      background-color: #12013f;
    } */
    .description {

      width: 50%;
      height: 100%;
      right:0px;
      left:50%;
      /* top:20; */
      position: fixed;
      background-color: white;
      transition-property: transform;
      mix-blend-mode: exclusion;
      z-index: 1000;
  margin: 10px;
  -webkit-transition: transform 0.8s;
  -moz-transition: transform 0.8s;
  -o-transition: transform 0.8s;
  transition: transform 0.8s ease-in-out;
  padding: 3%;
  overflow: auto;
  margin: 0;
  position: fixed;
  top: 0;
  opacity: 0.7;
  font-size: 1.5em;
  line-height: 1.1;
  
  }
  .splash {
    width: 100vw;
     height: 100vh;
     background-color: black;
     margin: 0;
     color: white;
     font-size: 2rem;
     line-height: 1;
     z-index: 111000;
     position: fixed;
     padding: 5%;
     padding-top: 2%;
     overflow: none;
     transition: transform 0.8s ease-in-out;
     cursor: url(../img/ENTER.png) 100 50, auto;
     object-position: center;
 
 overflow: auto;
 
 }
 .canvas-box1, .canvas-box2, .canvas-box3, .canvas-box4, .canvas-box5, .canvas-box12, .canvas-box13, .canvas-box14 {
  width: 400vw;
  transform: translate(-150vw, 0%);
}
  
       
    }
    
    @media screen and (min-width: 1280px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi)  {
    /* //For Big TV's (HD Screens)  */
    /* #about, #manifesto, #colors, #info, #impressum {
        margin-top: 20vh;
        margin-left: 20vw;
        overflow-x: scroll;
        height: fit-content;
        margin-right: 5%;
        margin-bottom: 5%;
        font-size: 1.5rem;
    } */
    /* body {
      background-color: #0cad14;
    } */
    .splash {
      width: 100vw;
       height: 100vh;
       background-color: black;
       margin: 0;
       color: white;
       font-size: 2rem;
       line-height: 1;
       z-index: 111000;
       position: fixed;
       padding: 5%;
       padding-top: 2%;
       overflow: none;
       transition: transform 0.8s ease-in-out;
       cursor: url(../img/ENTER.png) 100 50, auto;
       object-position: center;
       overflow: auto;
   
   
   
   }
       
      
    }
    
    
    @media screen and (min-width: 1920px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) {
    /* //For Projectors or Higher Resolution Screens (Full HD) */
    /* body {
      background-color: #ff7708;
    } */
   
    }
    @media screen and (min-width: 3840px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi)  {
    /* //For 4K Displays (Ultra HD) */
    /* body {
      background-color: #cd04ff;
    } */
    .splash {
      width: 100vw;
       height: 100vh;
       background-color: black;
       margin: 0;
       color: white;
       font-size: 2rem;
       line-height: 1;
       z-index: 111000;
       position: fixed;
       padding: 5%;
       padding-top: 2%;
       overflow: none;
       transition: transform 0.8s ease-in-out;
       cursor: url(../img/ENTER.png) 100 50, auto;
       object-position: center;
       overflow: auto;
   
   
   
   }
       
     
    }