/***
	 * POMMES FRITES SPECIFIC STYLESHEET 
     *
 	 * ACTIVE TILES IN THIS SHEET:
	 * 05, 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: 5%;
		left: 0.7vh;
		font-size: 3em;
		font-size: 7.2vh;
	}
    
    #sq14{display: none;} 
    #sq13{
        /* fallback styling */
        width: 240px;
        height: 120px;

        /* absolute styling */
        width: 40vh;
        height: 20vh;

        float: left;
       }      
        
    #bl05, #bl13, #bl24{   
        width: 99%;
        position: relative;
	    left: 49.5%;
        top: 49%;
        -webkit-transform: translate(-49.5%, -49%);
        transform: translate(-49.5%, -49%);
        }  

    #sq03, #sq06 {
        display: none;   
        }




    #sq04{display: none;}
	#sq05{
			/* fallback styling */
			width: 240px;
			height: 120px;
			
			/* absolute styling */
			width: 40vh;
			height: 20vh;
				
			float: left;
	}

	#sq23{display: none;}
	#sq24{
			/* fallback styling */
			width: 240px;
			height: 120px;
			
			/* absolute styling */
			width: 40vh;
			height: 20vh;
				
			float: left;
	}


@media (max-aspect-ratio: 1/1){
    #sq04{display: none;}
	#sq05, #sq13{
			/* fallback styling */
			width: 240px;
			height: 120px;
			
			/* absolute styling */
			width: 40vw;
			height: 20vw;
				
			float: left;
	}

	#sq23{display: none;}
	#sq24{
			/* fallback styling */
			width: 240px;
			height: 120px;
			
			/* absolute styling */
			width: 40vw;
			height: 20vw;
				
			float: left;
	}   
}

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

		left: 0.5vh;
	}
}

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

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

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

	#bl16{
		background-image: url(../art/pf_auf-dem-marktplatz.jpg);
		background-position: 20% 20%;
	}

	#bl17{
		background: url(../art/pf_viel-zu-tun.jpg); 
		background-position: 50% 20%;
	}

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

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

	#bl27{
		background-image: url(../art/pf_die-milch.jpg);
		background-position: 20% 10%;
	}


/*****   PAGE 2 CONTENT    *****/
        #bl01{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 0 0 !important;
        }
        #bl07{
            background: white;
        }
        #bl09{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 0% 10% !important;
        }
        #bl10{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 25% 10% !important;
        }
        #bl11{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 0 50% !important;
        }
        #bl13{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 250% !important;
            background-position: 35% 50% !important;
        }
/*
        #bl15{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 75% 50% !important;
        }
*/
        #bl20{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 0 87% !important;
        }
        #bl26{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 51% 87% !important;
        }
        #bl28{
            background-image: url(../art/pf_haus-am-wald-entwurf.jpg);
            background-size: 500% !important;
            background-position: 75% 87% !important;
        }


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

/*** COMMON STYLING OF ALL PAGE 2 TILES WITH PICTURES ***/
     #bl010, #bl070, #bl110, #bl100, #bl13, #bl200, #bl260, #bl280 {
         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: 5px;
        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;
		}
    


		.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;
        }
}