/***
	 * 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: -2vh;
		left: 1vh;
		font-size: 3em;
		font-size: 20vh;
        
	}



/***  STYLING FOR WIDE TILES  ***/
@media (min-aspect-ratio: 11/6) and (min-width: 1051px) {



    #sq27{display: none;} 
    #sq25{
        /* 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%);
        }  
}


@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: white;
	}

    #bl06{
        background-image: url(../art/ml_portrait-painting.jpg);
		background-size: 150%;
		background-position: 50% 50%;  
        background-size: 120%;
    }

	#bl08{
		background: white;
	}


    #bl15{
        background-image: url(../art/pf_haus-am-waldrand.jpg);
		background-position: 50% 40%;  
        background-size: 120%;
    }

	#bl16{
		background-image: url(../art/ml_abstract-painting.jpg);
		background-position: 20% 00%;
        background-size: 120%;
	}

	#bl17{
		background: white;
	}

	#bl05{
        background-image: url(../art/lh_luegenhold.jpg);
        background-size: 150%;
		background-position: 20% 50%;
        background-color: white;
    }


	#bl24{
		background: white;
	}

	#bl24{
		background-image: url(../art/ml_maedchen.jpg);
		background-position: 60% 30%;
        background-size: 200%;
	}

	#bl27{
/*
		background-image: url(../art/ml_space.jpg);
        background-image: url(../art/sw_wald-am-berg.jpg);
        background-image: url(../art/LH/LH.jpg);
		background-position: 60% 30%;
        background-size: 300% !important;
*/
        
	}





/*** COMMON STYLING OF ALL PAGE 1 TILES WITH PICTURES ***/
	 #bl06, #bl15, #bl16, #bl24, #bl05, #bl27 {
         opacity: 1.0;
     }


/*** COMMON STYLING OF ALL PAGE 2 TILES WITH PICTURES ***/
     #bl01, #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: 5px;
        font-size: 28px;     
    }  
    
    h2 {
        font-size: 21px;    
        bottom: 2px
    }  

    h3{
        font-size: 30px;  
    }
    
    #title_ata{
        font-size: 17px;
    }
    
    /*  Gallery Specific types  */
    #sq06, #sq15{
        display: block !important;   
    }
    #sq08, #sq12{
        display: none !important;  
    }
    .square{
        position: absolute;
        top: 40%; 
        left: 50%;
        transform: translate(-50%, -50%)
    }
    
    
}

/* 16:9 STYLE */
@media (min-aspect-ratio: 11/6) and (min-width: 1051px) {
    
        main * {
/*         border: 1px solid red;   */
        }
    
        #sq03, #sq06 {
            display: block;   
        }
}