@charset "utf-8";

html {
	overflow:hidden;
}

body {
	height:100%;
	font-family: 'Roboto', sans-serif;	/*, 'Khula', 'Open Sans'*/
	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
	color:#2e8abe;
}

p {
    line-height: 1.5em;
    text-align:     justify;
    text-align-last: left;
}

#homeBck {
	width:100%;
	height:100%;
	background-color: #f6f6f6;
}

.zoomViewport {
	width:100%;
	height:100%;
	outline: 4px solid #aaaaaa;
}

@media (max-width: 640px)  {
	.mainMenuItemHolder
	{
		position: relative;
		width: 420px;
		display:none;
	}
	
	.mainMenuItem  {
		float:left;
		position: relative;
		display: block;
		width: 200px;
		height:100px;
		cursor: pointer;
		margin:5px;
		/*box-shadow: 0px 0px 30px #aaa; slooooow animations*/
		border-style: solid;
		border-width: 1px;
	}
}

.mainMenuItemHolder
{
	position: relative;
	width: 100%;
	display:none;
	background:#069;
}

.mainMenuItem  {
	float:left;
	position: relative;
	display: block;
  	width: 150px;
  	height:100px;
	cursor: pointer;
	margin:5px;
	/*box-shadow: 0px 0px 30px #aaa; slooooow animations*/
	border-style: solid;
    border-width: 1px;
	
}


.mainMenuItem:hover  {
	box-shadow: 0px 0px 20px #999;
}

.mainMenuItemContent {	
	/*border:solid 1px #aaa;*/	
	/*outline-offset: 1px*/
	/*	outline: 1px solid #aaaaaa;*/
	position:relative;
	height:100%;	
	/*background: #edecea;*/
	background: #ffffff;
	overflow:hidden;
	
	/*-moz-transition:-moz-transform all 0.2s ease; 
	-webkit-transition:-webkit-transform all 0.2s ease; 
	-o-transition:-o-transform 0.2s all ease;
	transition: all 0.2s ease;
	transform-origin: 50% 50%; animations make it slow*/
}
/*
.mainMenuItemContent:hover {	
	background: #95daff;
}*/

.mainMenuItemContent :nth-child(2) {
	font-size:5em;
	font-weight: 1000;
	color:#ddd;
}

.mainMenuItemContent :nth-child(3) {
	font-size:1.2em;
	font-weight: 700;
	margin-top:4.2%;
	/*color:#555;*/
}

.mainMenuItemTitle {
	color: #2e8abe;
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align:center;
	margin-right: -50%;
	transform: translate(-50%, -50%) ;
	-webkit-transform: translate(-50%,-50%);/*because safari is dumb*/
}

#myName {
	position:absolute;
	top:0px;
	left:10px;	
	height:50px;
	max-width:100%;
	padding-right:50px;
	font-size:3em;

	color:#555;
	z-index:10000;
	height:50px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	cursor:pointer;
}

#milos {
	font-weight: 100;
}

#categoryTitle {
	color:#2e8abe;
	font-weight: 400;
	font-size:.77em;
	alignment-baseline:baseline;
	overflow:hidden;
	text-overflow:ellipsis;
	pointer-events:none;
}

.cent{
	position: relative;
    top: 50%;
    transform: translateY(-50%);
	left: 50%;
    transform: translateX(-50%);
	-webkit-transform: translate(-50%,-50%);/*because safari is stupid*/
}
.centerVertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
	-webkit-transform: translateY(-50%); /*for lousy 5% of safari market share*/
}

.galleryDescription
{
	width:420px;
	overflow:auto !important;
}

.categoryDescription
{
	padding-left:13px; /*except dev i art as these already have margin and need it less*/
	padding-right:10px;
	position: relative;
    top: 40%;
    transform: translateY(-40%);
	-webkit-transform: translateY(-40%);
	text-align:left;
}

@media screen and (max-height: 400px) {	
	.categoryDescription
	{
		top: 0%;
		transform: translateY(0%);	
		-webkit-transform: translateY(0%);	
	}
}

.categoryDescription p {
	margin-bottom:.8em;
}

.categoryDescriptionDev {
	top: 70px;
	transform: translateY(0%);	
	-webkit-transform: translateY(0%);	
	padding-left:5px;
}
.categoryDescriptionArt {
	top: 40px;
	transform: translateY(0%);	
	-webkit-transform: translateY(0%);	
	padding-left:5px;
}

#uxframe
{
	position:absolute;
	pointer-events:none;
}

#uxframeContent {
	display:none;	
}

#uxpageDescription {
	position:absolute;
	top:180px;
	margin-left:35px;
	width:50%;
	padding:5px;
	font-size:4em;
	background:rgba(248,248,248,0.75);
	display:none;
	pointer-events:all;
}

.fill { 
	width:100%;
	height:100%;
}

#itemcontainer {
	position:fixed;
	left:0;
	bottom:0;
	width:100%;
	height:100%;/*93%;*/
	display:none;
}

#itemcontainerPage {
	width:100%;
	height:100%;
}

.clonedThumb
{
	z-index:1100;
}


i[class^="icon-"]:before, i[class*=" icon-"]:before {
  margin: 0;
}

.youtubevideo {
	clear:both;
	position:relative;
}


#me {
	position:absolute;
	right:10px;
	bottom:3%;
	height:90%;
}

#aboutMe {
	position: absolute;
	/*background-color:#990;*/
	/*background:rgba(246,246,246,0.4);*/
	font-size:1.2em;
	line-height:160%;
	padding:5px;
	padding-left:0px;
	display:none;
	overflow:auto;
	top:60px;
	width:38.1%;
}

#aboutMeHolder p {
	margin: 12px 0px;
}

#aboutMeHolder{
	position: relative;
	margin: 0px 13px;
}
#aboutMeHolder span {
	background:rgba(246,246,246,0.77);
}

#aboutMeLoadMoreBtn {
	position:relative;
	cursor:pointer;
	font-weight:bold;
	margin-top:8px;
	width:50px;	
}

#aboutMeContent {
	position:relative;
	display:none;
	margin-top:10px;
}
/*
#aboutMeContent:hover {
	background:rgba(246,246,246,0.75);
}*/
#aboutMeBck { /*not used any more*/
	background:rgba(246,246,246,0.4);
	display:none;
	position:absolute;
	width:100%;
	height:100%;

}

#socialNetworkHolder {
	vertical-align:middle;
}
.socialNetwork {
	position:relative;
	display:inline-block;
	vertical-align:top;
	margin-right:5px;
}

#overlay {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(248,248,80,0.75);
	z-index:99999;
	display:none;
	font-size:1.1em;
}
#overlayText {
	padding:10px;
}
#overlayImage {
	background-image:url(../img/rotatescreen.png);
	background-position:center;
	background-size:auto;
	width: 80%;
	height: 50%;
	opacity:.17;
	background-repeat:no-repeat;
	display:none;
}
.overlayTextPortrait, .overlayTextShort, .overlayTextNarrow, .overlayTextShortAndNarrow {
	display:none;
}
/*
@media only screen 
and (max-width : 740px)
{
	#aboutMe {
		transform:scale(.01) !important;
		-webkit-transform:scale(.01) !important ;		
	}
}*/

@media (max-width : 768px) 
{	
	#aboutMe {
		width:61.8%;
	}
}
@media (max-width : 640px) 
{	
	#aboutMe {
		width:100%;
	}
}


@media only screen 
and (max-device-width : 768px) 
and (orientation : portrait)
{
	#overlayImage, .overlayTextPortrait {
	  display:block;
	}
}

/*too narrow 768*/
@media (max-width: 639px) 
and (min-height: 361px)
{
	#overlay {
		display:block;
	}
	.overlayTextNarrow {
		display:inline;
	}
	/*
#aboutMe, .mainMenuItemHolder {
		transform:scale(.01);
		-webkit-transform:scale(.01);
	}
	*/	
}

/*too short 769*/
@media (max-height: 360px)
and (min-width: 640px)  {
	#overlay {
		display:block;
	}
	.overlayTextShort {
		display:inline;
	}
	/*
	#aboutMe, .mainMenuItemHolder {
		transform:scale(.01);
		-webkit-transform:scale(.01);
	}*/
}

/*too short and narrow*/
@media (max-height: 360px)
and (max-width: 768px)  {
	#overlay {
		display:block;
	}
	.overlayTextShortAndNarrow {
		display:inline;
	}
	#overlayImage, .overlayTextPortrait {
	  display:none;
	}
	/*
	#aboutMe, .mainMenuItemHolder {
		transform:scale(.01);
		-webkit-transform:scale(.01);
	}*/
}
/*
@media screen and (-webkit-min-device-pixel-ratio: 2)
{ 
	#overlay {
		display:none;
	}
}
@media screen and (-webkit-min-device-pixel-ratio: 3)
{ 
	#overlay {
		display:none;
	}
}
*/
/* untested if really needed */
@-ms-viewport{
  width: device-width;
}

.shareButton {
	cursor:pointer;
	display:inline-block;
	/*content:url(img/fb.png);*/
}
.shareButtonIcon {
	font-size:1.5em;
	color:#2e8abe;
}
.clear {
	clear:both;
}
.fb-like-override {
	position: relative;
}


/*ONLY for share page*/
.spage {
	width:100%;
	height:100%;
	position:absolute;
}
.spage .imageholder
{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#f6f6f6;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.spage .subpageHolder
{
	padding:13px;
	padding-top:60px;
	height:100%;
}
.spage .shareButton {
	display:none;
}
#bckCat {
	position:absolute;
	width:200%;
	height:100%;
    left: -50%;
	background-color:#f6f6f6;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
 	background-image:url(../img/bckID.jpg);
 }
 
.catThumb {
	position:absolute;
	width:100%;
	height:100%;
	background-color:#f6f6f6;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	opacity:.5;
	/*background-image:url(../img/bckID.png);*/
 }
 
#footer {
	position:fixed;
	margin:0 auto;
	background:#333;
	color:#CCC;
	bottom:0;
	font-size:.8em;
}