/*
###########################################################################
Main styles for jerichocases.de 2023

FileName:   touch.css
Author:		Barbara Völk, www.grafik-webdesign.info
Version:    2023.03.02
###########################################################################
*/


/***********************************************/
/* COLOURS */

/*
logo
yellow #F1B700
white #FFFFFF
black #1D252A


Colours:
yellow1 #F1B700
yellow lighter #FFCF40
black #1D252A -> rgba(29,37,42,1)
blue #303084
red #CC0000
bg black #1D252A


black #000000 -> rgba(222,225,225,1)

Text:
White *ffffff;
black #111412 ??

*/



/*
Type Druck: Helvetica Neue
font-family: 'NotoSans", sans-serif;

Type Druck: Rotis Semi Sans
font-family: 'RobotoCondensed", sans-serif;

Menue
font-family: 'Titillium_Web", sans-serif;


/***********************************************/

/***********************************************/
/* MAIN SETUP RESET */
/***********************************************/

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

:root {
    font-size: 16px;
}

/*SETUP*/

html {
  height: 100%;
  overflow: hidden;
}
body { 
  margin:0;
  padding:0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  perspective: 1px;
    
    --color-white: #ffffff; /* white bg */
  --color-text: #ffffff; /* white or black #1D252A; */

  --color-link: #F1B700;/* greyblack #363638 rgba(155, 46, 32, 1) */
  --color-hover: #363638;/* greyblack #363638 rgba(155, 46, 32, 1) */
  --color-link-hover: #FFCF40;/* greyblack #363638 rgba(155, 46, 32, 1) */

  --color-yellow: #F1B600;/*  yellow #F1B600 */
  --color-light-yellow: #FECE43;/* yellow lighter #FECE43*/
  --color-blue: #303084;/* blue #303084 */
  --color-red: #CC0000;/* red #CC0000 */
  --color-black: #111412;/* black #111412 */
  --color-bg: #1D252A;/* black #1D252A */


  font-family:  'NotoSans', Arial, sans-serif;
  font-family:  'RobotoCondensed', Arial, sans-serif;
   color: #4c565c; /* logo grey #4c565c */
   color: var(--color-text);
    font-size:1.2rem;
/*font-size: clamp( 1.2rem, 2vw, 1vh);  */
    font-size: clamp( 1.2rem, 1.5vw, 0.5vh);  
	-webkit-background-size: cover; /* Safari, Chrome */
	background-size: cover; /* Opera, IE, W3C Standard */

    background: url(../images/yellow.png) repeat-y 68vw top;
  background-color: var(--color-bg);
	background-size: 20vw auto;

   /* height:100vh;*/ /* CAN'T USE HEIGHT FOR REVEALER IN HTML OR BODY TAG!!! */
    
    scroll-behavior: smooth;
}


/* Touch devices parallax version */
/* set via  @media (hover: none) or body.touch */
@media (hover: none) {
/*.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 130vh; height: 80vh;
  position: fixed;
  width: 100%;
  transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
   padding-bottom: 8vh;
}*/
}



/* seting body.touch  JS browser sniffing is needed though */
body.touch .background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 130vh; /*height: 80vh;*/
  /*position: fixed;*/
  width: 100%;
  transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
   padding-bottom: 8vh;
    
    position: relative;
  padding: 20% 10%; 
  min-height: 100%;  min-height: 96vh; min-height: 64vh; 
  width: 100%;
  box-sizing: border-box;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);*/
    
    box-shadow: 0px 14px 18px -3px rgba(29,37,42,0.7),
                0px -8px 18px -3px rgba(29,37,42,0.3);
    
   /* background: 50% 50% / cover; 
    background-size: cover;*/
     /*background: 50% 50% / cover;*/
}


body.touch #sectionLast.background .content-wrapper {
    will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;/*height: 80vh;*/
  position: fixed;
  width: 100%;
  transform: translateY(10vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}

/* extra settings for parallax Emily Hayman notouch devices only */
 @media (pointer:fine) {
 body.noTouch .background {
     height: 90vh;
            margin-top: 24vh;
     height: fit-content;
        }
}

/* have to put this directly in file, maybe find a place in a external css */
 body.noTouch .intro {
            height: 90vh;
            margin-top: 24vh;
     height: fit-content;
}
       

 body.noTouch #sectionLast.background {
            min-height: 90vh;
            /*margin-top: 24vh;*/ /*align-self: flex-end;*/
     height: fit-content; 
    /* background-color: yellow;*/
        }



/* #Typography
================================================== */

/* font.css  + main.css */



/********************************************************************/
/* MAIN WRAPPERS + MAIN LAYOUT ELEMENT + TAG SELECTORS */
/********************************************************************/

header {
	margin: 0px 0 0px 0;
	width: 100%; 
    height: 40px; height: 4vh; max-height: 40px;
    position: sticky;
	top: 0;
      background: url(../images/yellow.png) repeat-y 68vw top;
  background-color: var(--color-bg); 
	background-size: 20vw auto;
    grid-area: header;
    z-index: 1000;
}


.logoTop {
    width: 100vw;
   padding-bottom: 3vh; 
   display: flex;
    justify-content: flex-end;
}

.logoTxt {
    width:100vw;
   height: auto;
display: flex;
 justify-content: flex-end; 
align-items: flex-start; 
}

.logoTxt img{
   max-width: 100px; max-width: 220px;
     width:10vw; width:14vw;
   height: auto;
    margin-top: 2vw;
}

#logo {
   height: auto;
    width: 100vw;
    height: 8vw;  height: 6vw; 
   display: flex;
   flex-direction: column;
   margin-top: 4vh; 
   margin-right: 12vw;  margin-top: 5vh;
	background-size: 20vw auto;
}

.logoTop #logo {
   height: auto;
    width: 100vw;
    height: 8vw;  height: 6vw; 
   display: flex;
   flex-direction: column;
   margin-top: 4vh; margin-top: 0vh;
   margin-right: 12vw;
	background-size: 20vw auto;
}

.logo {
    width: 100vw;
   height: auto; height: 200px;
    margin-left: 0;
    display: flex;
justify-content: flex-end; 
}
.logoTop .logo {
    width: 100vw;
   height: auto;
    margin-left: 0;
   margin-top: 2vh;
    background: url(../images/logo.png) no-repeat right top;
    background: url(../images/logo2.png) no-repeat right top;
	background-size: 20vw auto; 
    display: flex;
justify-content: flex-end; 
}

.logo img{
   max-width: 328px;  max-width: 428px;
    width:24vw; width:20vw;
   height: auto;
    align-self: flex-end;
    opacity: 20%; opacity:0;
    
}

/* End Disable when done */

/* Parallax Master */
/* IMPORTANT: iOS has an issue preventing background-attachment: fixed; to work; doesn't show image altogehter. Use background-attachment: scroll; instead */
/*.section*/
body.touch .background {
  /*position: relative;
  padding: 20% 10%;
  min-height: 100%;  min-height: 100vh; 
  width: 100%;
  box-sizing: border-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
    background: 50% 50% / cover; 
    background-size: cover;*/
}


/*SECTION DATA BOXES*/
.text {
  width: 50%;
  padding: 10px 50px;
  /*border-radius: 5px;
  background: rgba(200,200,200, .7);
  box-shadow: 0 0 10px rgba(0, 0, 0, .8);*/
}
#section1 .text{
  margin-left: auto;
  margin-right: auto;
}
#section2 .text{
  margin-left: 0;
  margin-right: auto;
}
#section3 .text{
  margin-left: auto;
  margin-right: 0;
}

body.noTouch .last .content-wrapper p {
  max-width: 580px;
    width: 80vw;
    
}


body.touch .content-wrapper {
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-flow: column nowrap;
  color: #fff;
    color: var(--color-white);
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
    
    margin-left: 3vw; margin-right: 3vw;
     margin: auto;
     overflow: visible;
            padding: 0;
 
}

body.touch #splash.content-wrapper {
    overflow: hidden;
}

 
body.touch .content-subtitle {
    max-width: 760px;
    align-self: flex-end;
    padding-right: 3vw;
    text-align: left;
}


.content-title {
            font-family: 'NotoSans_ExtraLight', sans-serif;
            /*line-height: 3vw;
            line-height: 0;*/
            line-height: 5rem;
            /*font-size: 5.4rem;*/
            /*font-size: 6vw; */
            /*font-size: clamp( 5.4rem, 6vw, 6vh);*/
            
           /* font-size: min(max(5.4rem, 6vw), 6vh);*/  /* supported by Safari (11.1+), Chrome (79+)*/
   /* font-size: clamp(5.4rem, 6vw, 6vh); */ /*supported by Chrome (79+)*/
            /*font-size: min(max(4rem, 6vw), 6vh);
            font-size: 6vh;*/
    
    /* background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem; padding: 1rem;*/
        }


/*body.noTouch #splash .content-title:nth-child(1) {
                background-color: #ddd;
            margin-top: 44vh;
            margin-top: 30vh;
        }*/

        #splash .content-title:nth-child(2)

        /*, #splash .content-title:nth-child(3)*/
            {
           /* margin-left: 4vw;
            margin-left: 4vw;
            margin-top: -40px;
            mobile 678px 
            margin-top: -80px;
                 background-color: pink;*/
        }


/* IMPORTANT: iOS has an issue preventing background-attachment: fixed; to work; doesn't show image altogehter. Use background-attachment: scroll; instead */

/*SECTION IMAGES*/
body.touch #title {
    background-image: url(../images/divers/drops.jpg);
    /*transform: translateY(-15vh);
    margin-top: 0;*/
}
/*
#section1{
    background-image: url(../images/beschichtungen.jpg);
}
#section2 {
    background-image: url(../images/strikeFace.jpg);
}
#section3{
    background-image: url(../images/druckbehaelter.jpg);
}
#section4 {
    background-image: url(../images/speakerCases.jpg);
}
*/

body.touch #title { 
    background-attachment: scroll;
    /*transform: translateY(-15vh);*/
    transform: translateY(-5vh);
    margin-top: 0;
}
body.touch #section1{
   /* background-image: url(../images/beschichtungen.jpg);*/
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}
body.touch #section2 {
   /* background-image: url(../images/strikeFace.jpg);*/
  /*background-attachment: fixed;*/  
    background-attachment: scroll;
}
body.touch #section3{
   /* background-image: url(../images/druckbehaelter.jpg);*/
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}
body.touch #section4 {
   /* background-image: url(../images/speakerCases.jpg);*/
   /*background-attachment: fixed;*/  
    background-attachment: scroll;
}

body.touch #section5{
   /* background-image: url(../images/druckbehaelter.jpg);*/
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}
body.touch #section6 {
   /* background-image: url(../images/speakerCases.jpg);*/
   /*background-attachment: fixed;*/  
    background-attachment: scroll;
}

/*#section5*/ 

/*body.touch #footer,*/
body.touch #sectionLast{
  background: #111;
    background: url(../images/yellow.png) repeat-y 68vw top;
    background-color: var(--color-bg);
    background-size: 20vw auto;
    height: auto!important; 
     /*height: 60vh!important;*/
    /*height: 100vh; height: 100%;*/min-height: 100vh;height: fit-content;
    
    transform: translateZ(-1px) scale(2);
  z-index:-1;
}

/*body.touch #footer .content-wrapper*/
body.touch #sectionLast .content-wrapper{
  /*transform: translateY(40vh);*/transform: translateY(-5vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
    /*height: 100vh; height: 100%;*/min-height: 10vh;height: fit-content;
    /*background-color: aquamarine;*/
    overflow: visible;
}

/*body.touch #footer .content-wrapper p*/
/*body.touch*/ #sectionLast .content-wrapper p {
  max-width: 580px;
    width: 80vw;
    
}

/*body.touch #footer .footer*/
/*body.touch #sectionLast .footer {
    display: none;
}*/

#footerTouch {
    width: 100vw;
    display: block;
    clear: both;
    position: relative;/*position: fixed;*//*position: absolute;*/
    left: 0;
    top: 0;/*bottom: 0;*/
    
    display: none;
}

/*@media only screen and (max-width:1024px) and (orientation:portrait) {*/

@media only screen and (max-width:1024px) {
    
    .logoTop #logo {
   height: auto;
    width: 100vw0
    height: 8vw;  height: 6vw; /*height: 2vw; */
   display: flex;
   flex-direction: column;
   margin-top: 4vh; margin-top: 0vh; margin-top: -30px;
   margin-right: 12vw;  
  
   /*  background: url(../images/logo.png) no-repeat 68vw -5px;*/
  /*background-color: var(--color-bg);*/
	background-size: 20vw auto; background-size: contain; background-size: 35vw auto;
         /* position: absolute; top: -30px; top:-6vmin; */
        /* background-color: green;*/
}
    
    /*.logoTop .logo {
        background-color: yellow;
    }*/
    
}


@media only screen and (max-width:1024px) and (orientation:portrait) {
    
    
body.touch .content-wrapper {
  justify-content: center; 
}
    

    
}

 @media only screen and (max-width:768px) and (orientation:portrait) {
 
  body.touch {
     /* background-size: 20vw auto;*/
      background-size: 44vw auto;
      background-position: 50vw top;
     }
      
    body.touch .header {
    background-size: 44vw auto;
      background-position: 50vw top;
}
     
    body.touch .logoTxt {
    width:100vw;
   height: auto;
display: flex;
 justify-content: flex-end; 
align-items: flex-start; 
}

body.touch .logoTxt img{
     width:10vw; width:14vw; width:24vw;  width:26vw; 
    margin-top: 2vw;  margin-top: 0; margin-top: 1vh;
}


 body.touch .logoTop #logo {
         margin-top: -10px; margin-top: -3vh;
         margin-right: 6vw;
}
     

     
body.touch .logoTop .logo {
    width: 100vw;
   height: auto;
    margin-left: 0;
   margin-top: 2vh; margin-top: 4vh;
    background: url(../images/logo2.png) no-repeat right top;
	background-size: 20vw auto; 
    display: flex;
justify-content: flex-end; 
    
    background-size: contain;
    
    max-height: 120px;
    /*background-color: red; *//*background-color: transparent;*/
    /*opacity: 40%;*/
}

body.touch .logo img{
    width:24vw; width:20vw; width:40vw;
   height: auto;
    align-self: flex-end;
    /*opacity: 30%; *//*opacity:0;*/
    
}
 
  body.touch .background {        
    box-sizing: border-box;
    box-shadow: 0px 8px 14px -3px rgba(29,37,42,0.7),
                0px -8px 14px -3px rgba(29,37,42,0.3);
      
     /* box-shadow: 0px 14px 18px -3px rgba(29,37,42,0.7),
                0px -8px 18px -3px rgba(29,37,42,0.3);*/
     }
     
     /*body.touch #footer*/
     body.touch #sectionLast {
  background-size: 44vw auto;
      background-position: 50vw top;
    /*height: 100%;min-height: none; height: fit-content;*/
         
         /*background-color: blue;*/
}
     
     body.noTouch #sectionLast {
  background-size: 44vw auto;
      background-position: 50vw top;
    /*height: auto!important; */
   /* height: 100%;min-height: 90vh; height: fit-content;*/
  
        
}

     
   body.noTouch #sectionLast .content-wrapper, body.touch #sectionLast .content-wrapper  {
 /*height: fit-content;
 max-height: max-content;*/
}

   }


 @media only screen and (max-width:768px) /*and (orientation:portrait)*/ {
    body.touch .background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 130vh; 
  width: 100%;
  transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
   padding-bottom: 8vh;
    
    position: relative;
 padding:0 5vw 5vw 5vw; /*padding:0;*/
     }
     
      body.touch .background.height190 { 
                min-height: 180vh;
                 margin-top: 40vh!important;
                /*transform: translateY(-30vh);*/
            }
            
           body.touch .background.height180 { 
                min-height: 180vh;
                margin-top: 40vh!important;
                /*transform: translateY(-30vh);*/
            }
            
             body.touch .background.height160 { 
                min-height: 160vh;
                /* transform: translateY(-30vh);*/
            }
            
           body.touch .background.height140 { 
                min-height: 140vh;
                 /*transform: translateY(-30vh);*/
            }
     
        .content-title {    
            line-height: 5rem;
           line-height: 3rem;
            align-self: flex-end;  align-self: flex-start;
           /*background: lightgreen;*/
        }
     
     body.touch .content-subtitle {
    max-width: 760px;
    align-self: flex-end; 
    padding-right: 3vw; 
    text-align: left;
}
     
     body.touch #footerNoTouch {
         display: none;
     }
}