/***
	 * POMMES FRITES SPECIFIC STYLESHEET 
     *
 	 * ACTIVE TILES IN THIS SHEET:
	 * 01, 08, 12, 16, 17, 21, 24, 27
     *
     * ADDITIONAL CONTENT POSSIBLE IN TILES
     * 01, 07, 11, 10, 13, 20, 26, 28
	 *
	***/


/***  HEADLINE RE-SIZE FOR TITLE TILE  ***/
	h1{
		top: 4%;
		left: 0.7vh;
		font-size: 3em;
		font-size: 5.8vh;
        position: absolute;
	}












@media (max-aspect-ratio: 1/1){
    h1{
		top: 5%;
		left: 0.7vh;
		font-size: 3em;
		font-size: 5.8vw;
	}
    
    h2 {
		font-size: 1.5em;
		font-size: 4.8vw;
		bottom: -1%;

		left: 0.5vh;
	}
}

/***  BACKGROUNDS FOR TILES WITH PICTURES  ***/
	#bl01{
		background-image: url(../art/lh_luegenhold.jpg);
		background-position: center;
		background-size: 100%;	
	}

	#bl08{
		background-image: url(../art/lh_luegenbold.jpg);	
		background-position: 50% 20%;
	}

	#bl12{
		background-image: url(../art/lh_marktfrau-1.jpg);
		background-position: 50% 30%;
	}

	#bl16{
		background-image: url(../art/lh_marktfrau-2.jpg);
		background-position: 20% 20%;
	}

	#bl17{
		background: url(../art/lh_marktfrau-3.jpg); 
		background-position: 50% 20%;
	}

	#bl21{
		background-image: url(../art/lh_gefaengniss.jpg);
		background-size: 150% !important;
		background-position: 20% 50%;
	}

	#bl24{
		background-image: url(../art/lh_der-schelm.jpg);
		background-size: 100%;
        background-position: 20% 50%;
		opacity: 1.0;
	}

	#bl27{
		background-image: url(../art/lh_ende.jpg);
		background-position: 20% 30%;
	}



/*** COMMON STYLING OF ALL PAGE 1 TILES WITH PICTURES ***/
	 #bl01, #bl08, #bl12, #bl16, #bl17, #bl21, #bl24, #bl27 {
         background-size: 120%;
         opacity: 1.0;
     }

/*** COMMON STYLING OF ALL PAGE 2 TILES WITH PICTURES ***/
     #bl05, #bl07, #bl11, #bl10, #bl13, #bl20, #bl26, #bl28 {
         background-size: 120%;
         background-position: 50% 20%;
         opacity: 1.0;
     }


@media (max-width: 490px), (max-width: 650px) and (min-aspect-ratio: 4/3) {

    h1 {
        top: 7px;
        font-size: 28px; 
    }  
    
    .squarette{
        display: block;
        height: 88px !important;
        width: 88px !important;
        padding: 0px 0px;
    }
    
    h2 {
        font-size: 21px;    
        bottom: 2px
    }  

    h3{
        font-size: 30px;  
    }
    
    #title_ata{
        font-size: 17px;
    }
    
}







/* 16:9 STYLE (absent in master) */
@media (min-aspect-ratio: 11/6) and (min-width: 1051px) {
    
        main * {
/*         border: 1px solid red;   */
        }

        .gallery_link{
            display: none;    
        }
    
	    body {
			background: white;
		}
    
        #sq01{
            display: block !important;    
        }

		.fake_square{
			width: 100%;	

			/* fallback styling */
			height: 482px;
            top: 60px;
			/* absolute styling */
			height: 80.4vh;
            top: 10vh;
            display: none;
        }

		header{
			width: 80vh;
			
            background: white;
			padding: 1px;
            
            top: 60px;
            top: 10vh;
            
            left: 50%;
            margin-left: -25%;
            
            position: fixed;
		}
    
    	#navi {
		  top: -1.5em;
          left: 0;
	    }	
    
    
        #image_show{
            width: 100%;
            width: 100vh;
        }
    
        main{
            background: transparent !important; 
            width: 50%;
            position: relative;
            right: 00%;
            margin: 0;
            padding: 0;
            float: right;
            margin-top: 3%;
            margin-bottom: 0;
            
        }

		main article{
            /* fallback styling */
            width: 80%;
            margin-right: 10%;
            padding-left: 10%;
            /* absolute styling */
            //width: 152vh;
            
            margin-top:4em\9;
            width: 60%\9;
            padding-left: 20%\9;
            padding-right: 20%\9;
            background: white !important;
            border-bottom: 1px solid black;
		}	

        #open_image_backbutton {
            top: -1.5em;
            right: 0px;
        }
    
        h5{
            top: -2.8em;   
        }
        footer{
           
            margin: 0;
            padding 0;
            float: right;
            width: 50%;
            left: 50%;
            position: fixed;
        }
}




/* luegenHOLD BLANK SHEET */

    .left_arrow{
        display: none;  
        opacity: 0;
    }
    .right_arrow{
        display: inline;
        opacity: 1.0;
    }




@media (min-aspect-ratio: 11/6) and (min-width: 1051px) {
         .right_arrow{
            right: -50px;
        }
    
        .page1 {
            opacity: 1.0 !important;
            
        }
    

        
        #sq01, #sq07, #sq11, #sq10, #sq13, #sq20, #sq26, #sq28{
            /*
            -webkit-filter: blur(4px); 
            -moz-filter: blur(4px); 
            -ms-filter: blur(4px); 
            -o-filter: blur(4px); 
            filter: blur(4px); 
            opacity: 0.075;
            pointer-events: none;
            */
            }
        }


@media  {
#sq05, #sq02, #sq04, #sq07, #sq09, #sq10, #sq11, #sq13, #sq14, #sq18, #sq19, #sq20, #sq26, #sq22, #sq23, #sq28{
		display: none;
	}
}

#sq01{
    display: block;   
}