/*TODO! mobile friendly images*/
.desktop{ display:none; }
@media screen and (min-aspect-ratio: 1/1) and (min-width:640px){
	html{ font-size: 11pt; } 
	
	.mobile{ display:none; }
	.desktop{ display:block; }
	
	/*transations animations*/
	body .main{	
		transition: filter 0.15s linear;
	}
	body.overlay_open{
		/*TODO!: HANDLE THIS DIFFERENTLY ON DESKTOPS*/
		overflow:hidden;	
		/*keep scrollbar but prevent scrolling to prevent "jump" on windows desktops - but scrolls page to top*/
	    /*
		position: fixed;
	    overflow-y: scroll;
		top:0; right:0; left:0; bottom:0;*/  
	}
	body.overlay_open.overlay_closing{ overflow:auto; }
	.social a{ display:block; margin-bottom:1.5em; }
	.social a:last-of-type{ margin-bottom:0; }
	.social img{ height:1.25em; width:1.25em; }
	.overlayed .close{left:auto; right:2em; }
	
	.articles .insides{
	    width: 80%;
	    max-width:1100px;
	    margin: auto;
	}
	.articles.overlayed{
		/*padding-top:5em;*/
		padding-top:9vh;
		box-sizing:border-box;
	}
	.article.creation{
		padding-top:0;
	}
	.article video{
		height:85vh;
	}
	
	.videowrap .control{
		font-size:1em;
	}
}
@media screen and (min-aspect-ratio: 1/1) and (min-width:640px){
	.contact .social{ display:block; }
	.overlayed .insides{ display:block; }
	.overlayed .logo{
		position: absolute;
		left: 20%;
		transform:translateX(-50%);
	}
	.menu .itemwrap, .contact .contactwrap{
	    flex-grow: unset;
	    min-height: 100%;
	    width: 65%;
	    margin-left: 35%;
	    box-sizing: border-box;
    }
    
	.menu .logo{
		transform: translate(-50%,-50%);
		top: 50%;
	}
    .menu .items li, .menu.closing .items li{
    	transform:translateX(50vw)
    }
    
    .contactwrap{
	    display: flex;
	    justify-content: left;
	    align-items: center;
    }
    .contact .form_inner{
    	width:100%;
		padding-top:1em;
    }
    .contact .logo{
	    top: 3.5em;
    }
    .contact h1{
	    position: absolute;
		left:2em;
	    top: 40%;
	    transform: translateY(-50%);
    }
    .contact .inputs{
    	padding-bottom:1em;
    }
    
	.contact .form_inner{
		max-width:35em;
	}
	
	/*page*/
	body{ overflow-y:hidden; }
	.mainwrap{
		position:absolute;
		top:0;left:0;right:0;bottom:0;
		overflow:auto;
		overflow-y:hidden;
	}
	.main{
		white-space:nowrap;
		height:100%; 
		/*width:1510vw;*/ 
	}
	.page{ 
		height: 100%;
		overflow: hidden;
		display: inline-block;
		width: 100vw;
		position: relative; 
	}
}
@media screen and (min-aspect-ratio: 1/1) and (min-width:900px){
	.contact .contactwrap{
		width:50%;
		margin-left:50%;
	}
	.overlayed .logo{
		position: absolute;
		width:11em;
		transform:none;
		left:9em;
		top:4em;
	}
    .contact h1{
		font-size: 2em;
		left:4.5em;
	}
}
@media screen and (min-width:1000px){
	.menu .items li br{ display:none; }
}
@media screen and (min-width:1200px){
	.articles .article > p{
		width: 48%;
		margin-left: 41%;
	}
	.beginnings p.p1,
	.beginnings p.p2{
		margin-left:20%;
		width:40%;
	}
	.beginnings p.p2{
		width:50%;
	}
	.article.beginnings .visual1{
		width: 35%;
		height: 30em;
		margin-left: 61%;
		margin-top: -21em;
	}
	.article.beginnings .visual2{
	    width: 72%;
	    margin-left: 17%;
	    height:40em;
	}
	.article.beginnings .visual3{
		position:absolute;
		margin: 0;
		left: 10%;
		width: 52%;
		bottom:-12em;
		height: 35em;
		background-position:center 2%;
	} 
	.beginnings .p1{ z-index:18; position:relative; }
	.beginnings > .ondrash{
		position: absolute;
		left: 16%;
		margin-left: 0;
	}
	.beginnings .cta_block.paintingsblock{
		margin-bottom: -19em;
		margin-top: 13em;
		margin-left: 10%;
	}
	.beginnings .p5{
		padding-bottom: 27em;
	}
	.article.creation{
		margin-bottom:12em;
	}
	.article.creation .p1{
	    margin-left: 19%;
	}
	.creation .cta_block.paintingsblock{
		position:absolute;
		left:7%;
	}
}
/*reasonably tall wide screens*/
@media screen and (min-aspect-ratio: 1/1) and (min-width:900px) and (min-height:700px){
    .contact .form_inner{
		padding-top:1em;
    }
}