/***
	 * GENERAL LAYOUT
	 *
	 * 1.) body, a and other overall attributes
     * 2.) layout, square
	 * 3.) Header, Footer, Navigation
	 * 4.) Individual Tyles
	 * 5.) @Media
	 *
***/





/***  1.) body, a and other overall attributes  ****/

/*@import url('../fonts3/master_fonts.css');*/

    /* overrides for stupid JQuery Mobile 
    /  NOT NEEDED ON NON-JQM VERSION
    body * {
        box-shadow: none !important;
        -moz-box-shadow: none !important; 
        -webkit-box-shadow: none !important; 
        -o-box-shadow: none !important; 
        outline: none !important;
    }

    .ui-loader{
        display: none !important;   
    }
    */

    body {
        background: #333;
		color: white;
		font: 1em Blockschrift, 'Neue_Mogobau_Text', 'Neue Mogobau Text';
        font-size: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
      }

	h1 {
		display: block;
		font-family: 'Neue_Mogobau_Headline', 'Neue Mogobau Headline';
		position: relative;
		
		top: 5%;
		left: 0.7vh;

		font-size: 3em;
		font-size: 7.2vh;

		line-height: 100%;
		margin: 0;
	}

    h1:hover{
        color: red;   
    }
	
	h2 {
		display: block;
		font-family: 'Neue_Mogobau_Headline', 'Neue Mogobau Headline', Kambri;
		position: absolute;
		
		font-size: 1.5em;
		font-size: 4.8vh;
		bottom: -1%;

		left: 0.5vh;

		line-height: 100%;
		margin: 0;
	}

   	h3{		
   		font-family: 'Neue_Mogobau_Headline', 'Neue Mogobau Headline';
		display: block;
		color: black;
		text-shadow: 1px 1px #ccc;
		position: relative;
		
		font-size: 1.5em;
		font-size: 4.8vh;

		top: -1.2em;
		left: 0.5vh;

		line-height: 100%;
		margin-bottom: -1em;
	}	

    h4{
        font-size: 100%;   
        font-family: 'Neue_Mogobau_Text', 'Neue Mogobau Text';
        font-weight: 600;
    }


     a, a:visited, a:active{
     	color: #fe3b40;
     	text-decoration: none;
     }
     a:active{
     	color: white;
     }

    a:hover{
        text-decoration: underline;   
    }

	 ::selection {
	  background: #fe3b40; /* WebKit/Blink Browsers */
      color: white;
	}
	::-moz-selection {
	  background: #fe3b40; /* Gecko Browsers */
      color: white;    
	}

	 a::selection {
	  background: #ccc; /* WebKit/Blink Browsers */
	}
	a::-moz-selection {
	  background: #ccc; /* Gecko Browsers */
	}
	  
    p{
        margin: 0px; 
        text-indent: 2em;
    }
	  
/***  1.1.) Touch   ***/	  
	  
 
    #touchinput {
        width: 600%;
        height: 90%;
        position: absolute;
        background: transparent;
        //background: red;
        left: 0;
        top: 0;
        z-index: 1;
        
        
    }

    header {
        z-index: 1;  
        pointer-events: none;
    }

    .yes, .click_through, #blTTL, #navi, #open_image_title, #right_arrow, #left_arrow, #open_image_backbutton{
        pointer-events: all;   
    }


/***  2.) layout, squares   ***/	  
	
	.fake_square{
		background: #333;

		/* fallback styling */
		width: 100%;
		height: 800px;
		height: 140%;
		/* absolute styling 
		//height: 90vh;
		//width: 100vw;*/

		z-index: 1;	
		position: absolute;
        /*
		left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        padding: 1px;

        //box-shadow: 1px 1px 70px #999;
       */ 
	}

    .left_arrow, .right_arrow{
        font-family: 'Neue_Mogobau_Headline', 'Neue Mogobau Headline', Kambri;
        font-size: 200%;
        position: absolute;
        top: 45%;
        padding: 20px;
        color: black;
    }

    .left_arrow a:hover, .right_arrow a:hover{
        color: black;
        text-decoration: none;
    }

    .left_arrow{ left: 0;}
    .right_arrow{right: 0;}
	  
	header{
		background: white;
		white-space: nowrap;
        position: relative;
		
		/* fallback styling */
		width: 480px;
		height: 480px;
        padding: 50px;
		/* absolute styling */
		height: 80vh;
		width: 80vh;
		padding: 10vh;
      
        left: 50%;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        z-index: 1;
        
/*        margin-top: 5vh;*/
	}

    #image_show{
        position: absolute;
        
        height: 480px;
        width: 480px;
        height: 80vh;
        width: 80vh;
        display: none;

    }

    #image_show img{
        
        height: 100%;
        height: 80vh;
         
        position: relative;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);      
    }

    main {
        background: #333;
        
        width: 100%;
        position: relative;
        z-index: 1;
        
        margin: 0;
        padding: 0;
        margin-top: -30px;
        margin-top: -10vh;
        margin-bottom: 10em;
        
        border: 0;

    }

	main article{
        padding: 0;
        margin: 0;
		/* fallback styling */
		width: 480px;
        padding: 50px;
        padding-top: 50px;
		/* absolute styling */
		width: 72vh;
        padding: 4vh;
        padding: 14vh;
        padding-top: 5vh;	

		left: 50%;      
        -webkit-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);

		background: white;
		white-space: normal;
		color: black;

		display: block;
        
		position: relative;
		height: auto;

		line-height: 1.5em;
        margin-bottom: 10em;

        z-index: 1;

	}

    #page_navigation {
        display: block;  
        position: absolute;
        width: 100%;
        text-align: center;
        left: 0;
        bottom: 10vh;
        margin-top: -2em;
        font-size: 200%;
        background: transparent;
    }

    #page_navigation a:hover {
        text-decoration: none;
    }

    .stylesheet1, .stylesheet2 {
        margin: 2px;  
        font-size: 25px;
        color: black;
    }

    .stylesheet2{
        color: #ccc;   
    }

    .stylesheet1:hover, .stylesheet2:hover{
        color: red;
    }

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


	footer{
        font-weight: 600;
		position: fixed;
		background: #333;
		color: white;
        //letter-spacing: 1px;
      
        width: 100%;
        height: 6em;
        bottom: 0;
        left: 0%;
        margin: 0;
        padding: 30px;
        //box-shadow: -4px -4px 50px white;
        z-index: -1;
        
        padding-left: 25%;
        padding-right: 25%;
        
        padding-left: 0vh;
        padding-right: 0vh;
        
        padding-left: 20%\9;
        padding-right: 20%\9;
	}

    footer .weblink{
        float: right;    
        font-size: 150%;
    }



    footer section{
        padding: 1% 5%;    
    }
	
	.sq_fill{
        background: pink;
		white-space: normal;
	
		height: 98%;
		width: 98%;
		
		position: relative;
        left: 49%;
        top: 49%;
        -webkit-transform: translate(-49%, -49%);
        transform: translate(-49%, -49%);
	}
	
	.sq_hover{
        opacity: 0.0;
        filter: alpha(opacity=00); /* For IE8 and earlier */ 
		color: white;
        zoom: 1;
        position: absolute;
		
		
		height: 100%;
		width: 100%;
		

		text-align: center;
		vertical-align: middle;
        
        display: block;
		
	}
	
	.sq_hover:hover{
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */

		color: white;
		text-shadow: 1px 1px 1px black;
	}

    .sq_text{
        position: absolute; 
        bottom: 0;   
        left: 0;
        width: 84%;
        background-color: rgba(255, 0, 0, 0.4);
        font-size: 120%;
        padding: 4%;
        margin: 4%;
        font-family: 'Neue_Mogobau_Text', 'Neue Mogobau Text', Kambri;
        font-weight: bold;
        
    }

	.sq_bg{
        background: green;
        opacity: 0.3;
        filter: alpha(opacity=30); /* For IE8 and earlier */ 
        width:100%;
        height: 100%;
        position: absolute;
        left: 0; top: 0; right: 0; bottom: 0;
        display: block;
        
	}
	
	.squarette{
		/* fallback styling */
		width: 120px;
		height: 120px;
		height: 120px;
		/* absolute styling */
		width: 20vh;
		height: 20vh;
		
		float: left;
	}
	
	.squarette_wide{
		/* fallback styling */
		width: 240px;
		height: 120px;
		
		/* absolute styling */
		width: 40vh;
		height: 20vh;
		
		float: left;
	}

	article ul li {
		margin:2%;
		font-size: 90%;
	
	}
	

/***  3.) Header, Footer, Navigation  ***/

	#title_ata {
		font-family: 'Neue_Mogobau_Text', 'Neue Mogobau Text', Kambri;
		//letter-spacing: 0.025em;
        font-size: 20px;
        //font-size: 3.6vh;
		font-weight: 600;
		position: absolute;
		padding: 3px;
		bottom: 0;
		text-align: right;
		width: auto;
	}	

	h5 {
		font-family: 'Neue_Mogobau_Headline', 'Neue Mogobau Headline', Kambri;
		font-size: 1.2em;
		color: black;
		position: absolute;
		top: 0.2em;
        left: 40px;
		left: 4vw;
		display: none;
		text-align: left;
		width: auto;
        text-transform:capitalize;
	}	

	
	#navi {
		font-family: 'Neue_Mogobau_Headline', 'Neue Mogobau Headline', Kambri;
		font-size: 20px;
        font-weight: bold;
		color: #fe3b40;
		position: absolute;
		top: 1.5em;
		right: 3.6em;
		
		text-align: left;
		width: auto;
	}	

    #navi span{
        font-size: 75%;
        margin: 0 0.33em;
    }

	#open_image_backbutton, open_image_title {
		font-family: 'Neue_Mogobau_Headline', 'Neue Mogobau Headline', Kambri;
        font-weight: bold;
		font-size: 1.2em;
		color: #fe3b40;
		position: absolute;
		top: 1.5em;
		right: 1.5em;
		
		text-align: left;
		width: auto;
		display: none;
	}	

    .no_mobile {
        display: none;
    }

    .sans {
        font-family: 'Neue_Mogobau_Text', 'Neue Mogobau Text'; 
        //font-size: 18px;
        //letter-spacing: 0.5px;
    }
    .block{
    	display: block;
    }

	  


/***  4.) Individual tyles ***/


	.sq_fill_wide{
		width: 99%;
		position: relative;
        left: 49.5%;
        top: 49%;
        -webkit-transform: translate(-49.5%, -49%);
        transform: translate(-49.5%, -49%);
    }


/***  5.) Media Queries ***/



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

/* less than 1/1 style */
@media (max-aspect-ratio: 1/1) {
    .squarette {
       	width: 20vw;
		height: 20vw; 
    }
    
    .squarette_wide{
		width: 40vw;
        height: 20vw;
    }
    
    header {
        height: 80vw;
		width: 80vw;
		padding: 10vw;
    }
    
    main {
        //margin-top: -50px;
        //margin-top: -10vh;
        //margin-bottom: 10em;
        top: 10vh;
    }

	main article{
		width: 72vw;
        padding: 4vw;
        padding: 14vw;
        padding-top: 1vw;	
	}
    
    #image_show{
        height: 80vw;
        width: 80vw;
    }  
    
    #image_show img{
        
        height: 100%;
        height: 80vw;   
    }
}

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

    body{
        background: #ccc;
    }

    .fake_square{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30px;
        background: white !important;
    }
    
    html, body, header, main, article, footer { 
        width: 100%;
        overflow-x: hidden;
        margin: 0;
    }
    
    html, body {
        overflow-x: auto;  
    }

    main {
        top: 0;
        margin-top: -100px;
    }
    
    main article{
        width: 90%;  
        padding: 5%;
        padding-top: 35px;
        margin-bottom: 0;
        left: 0;   
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    
    header{
        position: relative;
        float: none;
        left: 0;
        margin: 0 auto;
        padding: 0;
        display: block;
        height: auto; 
        width: 264px;
        padding-top: 30px;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        background: white;
        padding-bottom: 0;
    }
    .squarette, .squarette_wide{
        //display: block;
        height: 88px;
        width: 88px;
        padding: 0px 0px;
    }
    
    .squarette_wide{
        width: 176px;   
    }
    
    main{
        top: 00px; 
        //position: absolute;
        width: 264px;
        margin: 0 auto;
        margin-bottom: 150px;
    }
    
    #navi{
        position: fixed;
        top: 4px;
        left: 2px;
    }
    
    .right_arrow, .left_arrow{
        top: 0px;
        margin: 0;
        padding: 0;
    }
    
    .left_arrow{
        left: 249px;   
    }
    
    main .anchor_scroll{
        display: none;   
    }
    
    .no_mobile{
        display: block;   
    }
    
    footer{
        position: fixed;
        bottom: 0;
        width: 50%;
        padding: 0 25%;
        margin: 0;
        height: 100px;
    }
    
    #image_show{
        position: relative;
        left: 0;
        top: 30px;
        height: 295px;  
    }
    
    #image_show img {
        height: 100%;
    }
    
    #sq03, #sq06, #sq15, #sq25, #sq09{
        display: none !important;   
    }
        
    #2sq01, #2sq07, #2sq10, #2sq11, #2sq13, #2sq20, #2sq26, #2sq28{
        display: block; 
    }
}


/* INTERNET EXPLORER 10 HACK */
@media all and (-ms-high-contrast: none) { 
    footer{
        padding-left: 20%;
        padding-right: 20%;
    }    
}    

@media (min-aspect-ratio: 5/3) and (-ms-high-contrast: none) { 
    main article {
        margin-top:4em;
        width: 60%;
        padding-left: 20%;
        padding-right: 20%;  
    }
} 

/* NOT FINAL, BUT ADJUST TEXT SIZE IN EXTREME WINDOW CONDITIONS */
@media (max-height: 490px) {

    #title_ata{
        font-size: 12px;   
    }
}