@charset "utf-8";
/* CSS Document */


 html,body {

  height:100%;
  min-height:175px;
  margin:0;
  background:url(../images/tile.gif) repeat;
  position:relative;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:11px;
  font-style:italic;
  color:#000;

 }

a {
	text-decoration:none;
	color:#80a49a;
}


a:hover {
	color: #fff;
}

ul, menu {
	padding:0;
	margin:0;
	list-style:none;
}

h1, h2, h3, h4 {
	padding:0;
	margin:0;
	font-style:italic;
	margin-bottom:0.8vw;
}

h1 {
	font-size:1.3vw;
}

h2 {
	font-size:1vw;
}

h3 {
	
	font-size:2vw;
	margin-bottom:5%;
	
}


iframe {
	
/*height:100vh; 
min-height:100%; 
width:100vw; 
min-width:100%;	
border:1px solid #f00;
overflow:hidden;
height:100%;
width:100%
	*/
	
}



/* -            main        ------ */

.content {
  height:100%;
  min-height:100%;/*for mozilla*/
	padding-top:2%;
	max-height : 100vh;
	width      : 100%;
/*	overflow   : hidden;*/

}

html>body .content {
  height:auto;

}
#home{
background: url(../images/linksBG.jpg)/*50% 0*/ no-repeat fixed;
background-size: 100% auto;
	
}

#work {
	background:url(../images/gallery-bg.jpg)/*50% 0*/ no-repeat fixed;
background-size: 100% auto;

}

#about {
	background:url(../images/about-bg.jpg)/*50% 0*/ no-repeat fixed;
background-size: 100% auto;

}

#contact {
	background:url(../images/paper-bg.jpg)/*50% 0*/ no-repeat fixed;
background-size: 100% auto;

}

#home, #work, #about, #contact, #links {
	background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* ------------- NAVIGATION ---------------- */

.sideNav {
	position: fixed;
  height:100%;
  min-height:175px;
  padding: 1%;
  background-color: #000;
  color:#fff;
  text-align: left;
  width:13%;
	font-style:italic;
	z-index:100;

}

.sideNav p {
	font-size: 0.8vw;
	text-align:center;
	margin:0 auto;
	padding-bottom:3%;
	width:90%;

	margin-left:-2%;

}

.socialTxt {
	display:inline;
}

#nav {
	
	padding-top:2%;
	margin-bottom:2%;
	padding-bottom:12%;
	font-size:2.3vw;
	
}



#nav ul li a {
	color:#999;
	display:block;
	text-decoration:none;
	font-style:italic;
	font-weight:bold;
	margin-bottom:1%;

}

#nav ul li a:hover, #nav ul li a.active {
	color:#fff;
}

#nav ul li.active a {
	color:#fff;
}

#nav ul ul {
	margin-bottom:1%;
	margin-left:2%;
	display:none;

}

#nav ul ul li a {
	color:#999;
	display:inline;
}

#nav ul ul li a:hover, #nav ul ul li a.active {
	color:#fff;
}

.socialLinks {
	font-size:1vw;
	font-style:italic;
	margin-bottom:16%;
}

.socialLinks ul li a {

	height:auto;
	padding:1% 0;	
	font-size:1vw;
}

.fb {
	background:url(../images/fb.gif) left no-repeat;	
	background-size:contain;
	padding:10% 20% 0 0;
	
}

#footer {
	font-size:1vw;	
	text-align:center;
	margin:0 auto;
}


/* ------------ content ------ */

.contentWrapper, .contentWrapperSlim {
	
	margin-left:23%;
	height:100%;
	min-height:100%;/*for mozilla*/

}


#homeBlock {
	width:60%;
	height:80%;
	padding:2% 5%;
	min-height:80%;/*for mozilla*/
	margin:0 auto;

	/**/position:absolute;
	top: 50%;
	transform:translateY(-50%);

}


#homeBG {
	
	background-image:url(../images/dandelions.gif);
	background-position: bottom; 
	background-repeat: repeat-x;
	width:100%;
	height:100;
	min-height:100%;/*for mozilla*/
/*	z-index:10;*/
	position:absolute;
}



/* --------------- W O R K - work section --------*/

#workContent {
/*	background:#f00;*/
	width:90%;
	text-align:center;

}



.scrollHolder {
	width:100%;
	/*background:#f00;*/
	height:80vh;
	overflow-y:scroll;	
	
}




#animationInner, #photoInner {
vertical-align:middle;
	
}

#animationInner img {
/*float:left;	*/
max-width:212px;
display:inline-block;
width:18vw;
margin:3px;
height:auto !important;
	
	
	
}


.artInner img {
max-width:120px;
display:inline-block;
width:15vw;
margin:3px;
height:auto !important;
}


a.photoInner, button.photoInner {
display:inline-block;
position:relative;
/*width:25%;
margin:3px;
height:auto !important;
z-index:1;*/
	
}

a.photoInner img{
/*display:inline-block;
position:relative;*/
width:20vw;
margin:3px;
 -webkit-filter: brightness(.75);
    filter: brightness(.75);
/*height:auto !important;
z-index:1;*/
	
}


.photoSection {
	
	z-index:20;
	vertical-align:central;
	position:absolute;
	color:#fff;
	font-weight:bold;
	  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);
  font-size:2em;
  text-shadow: 3px 2px 8px #000 
	
}




#aboutOuter {
	padding:2% 5%;
	min-height:80%;/*for mozilla*/
	margin:0 auto;

}

#aboutBlockLeft {
	float:left;
	width:55%;
	background:#fff;
	height:80%;
	font-size:2.6vh;
	padding:2%;
	margin-top:5%;
	margin-left:-10%;
	margin-right:5%;
	box-shadow: 0.2em 0.2em 1em #666;
}


#aboutBlockRight {
	float:left;
	width:30%;
	background:#fff;
	padding:2%;
	font-size:2vh;
	margin-top:5%;
	box-shadow: 0.2em 0.2em 1em #666;
}


.profileScale {
	width: 32%;
	height: auto\9; /* IE8 */
	float:left;
	margin-top:5%;
	display:block;
	box-shadow: 0.2em 0.2em 1em #666;
}
	.profileScaleWide {
		display:none;
	}



#contactBlockBG {
	background:url(../images/contactBG.jpg);
    background-size: cover;
    background-repeat: no-repeat;

	
	width:65%;
	height:80%;


	min-height:70%;/*for mozilla*/
	margin:0 auto;
	margin-left:20%;
	position:absolute;

}

#contactBlock {
position:absolute;
width:65%;
height:auto;
z-index:100;
top:15%;
left:13%;
font-size:1.6vw;
}

#contactBlock a {
text-decoration:underline;
}


#contactSpacer{
	padding-top:5%;
}
		

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

.pigeon {
width: 25%;
	height: auto\9; /* IE8 */
  z-index:99;
  position:absolute;
  bottom:-12%;
  right:0;

}
		

#linksBlock {
	width:65%;
	margin:0 auto;
	float:left;
	margin-top:8%;
	background:url(../images/linksBG.jpg);
	padding:2%;
	font-size:1.5vw;
	text-align:center;
}

#linksBlock a:hover {
	color:#000;
}

#linkNav {
	width:12%;
	float:left;
	margin-right:5%;
padding-top:8%;
}

#linkNav ul a img {
	
	width:50%;
	height: auto\9; /* IE8 */
		
}

#linkNav ul a:hover img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}


#linksBlock ul li a {
text-decoration:none;
display:block;
padding-bottom:5%;
font-weight:bold;
}

#linksBlock ul li a:hover {
color:#000;
text-decoration:underline;
}


ul#linksLeft, ul#linksRight {
	width:48%;
	float:left;
	text-align:left;
	margin:0;
	padding:0;
}


.name {
	margin-bottom:5%;
	text-align:center;	
}



.mainText {
font-size:1.5vw;
}



/* -------------------- MISC ----------------- */

.centered {
	text-align:center;
}

.divider {
	padding:8% 0;
	width:80%;
	border-top:1px solid #fff;
	margin:0 auto;

}

.spacer {
	margin-top:5%;
}

.fixed-ratio-resize2 { /* basic responsive img */
	width: 10%;
	height: auto\9; /* IE8 */
}

.fixed-ratio-resize { /* basic responsive img */
	width: 30%;
	height: auto\9; /* IE8 */
}

    .responsive-typeSmall {
    font-size: 11px;
    /* for no calc support - will jump */
    font-size: 10px;
  }
/*}*/

.bigText {
	font-size:3vw;
	font-style:italic;
	overflow: hidden;
		z-index:200;

}

.clear {
	clear:both;
	padding-top:8%;
}

.clearClean {
	clear:both;
}


/* ------ colours ----- */

.white {
	color:#fff;
}

.black {
	
	color:#000;
}

.grey {
	color:#999;
}


/* ------------ MOBILE --------------------- */

@media all and (orientation: portrait) {

.profileScale {
	display:none;
}

.profileScaleWide {
	display:block;
	width: 40vw;
	margin:0 auto;
	box-shadow: 0.2em 0.2em 1em #666;
  
}


#aboutOuter {
	width:90%;
	height:90%;
	padding:2% 5%;
	min-height:80%;/*for mozilla*/
	margin:0 auto;

}

 
 #aboutBlockLeft {
	float:none;
	width:80%;
	padding:2%;
	margin:0 auto;
	margin-top:5%;
	margin-bottom:5%;
	font-size:1.5vh;
}

#spacerCol { display:none;}

#aboutBlockRight {
	float:left;
	width:90%;
	margin:0 auto;	
	padding:2%;
	margin-top:3%;
	font-size:0.7vh;
}


.contentWrapperSlim { margin-left:16%;}

h1 { font-size:2vw;}

h2 {font-size:1vw;}

.sideNav p {font-size: 1vh;}

.mainText {font-size:2vh;}
 
 .bigText {	font-size:2.5vh;
	font-weight:bold;} 
	
.mailLink {
font-size:1.6vh;
color:#fff;	
}
	

#contactBlock a {
color:#fff;
}	

.socialTxt {
    display: none;
  }
  

  #nav ul li a {
	padding:8% 0;

}

 .fixed-ratio-resize { /* basic responsive img */
	width: 30%;
	height: auto\9; /* IE8 */
} 
  
  
    .fixed-ratio-resize2 {
	width: 25%; 
	float:left; 
	margin-right:3%;
	padding-bottom:8%;
	height: auto\9;
  }
  
  
 #footer {
	font-size:1.3vw;	
} 
 
 
 .pigeon {
width: 45%;
	height: auto\9; /* IE8 */
  z-index:99;
  position:absolute;
  bottom:-6%;
  right:0;

}

 .framer {
	width:110%;
	height: 100%;
}
 
#contactBlock {
margin-left:7%;
font-size:2vh;
}
  

/* */ 
 #linkNav {
	width:12%;
	float:left;
	margin-left:2%;
padding-top:8%;
}

#linkNav ul a img {
	
	width:100%;
	height: auto\9; /* IE8 */
	padding:12% 1%;
		
}
 
 #linksBlock {
	font-size:1.6vh;
}
 
 #linksBlock h3 {
	 font-size:2vh;
	 
 }
ul#linksLeft, ul#linksRight {
	width:90%;
	float:none;
	padding-left:5%;
	padding-top:2%;
} 
 

#animationInner img {
width:18vh;
height:auto !important;
display:inline-block;
	
}

a.photoInner img, button.photoInner img {
/*float:left;	*/
display:inline-block;
width:20vh;
margin:3px;
height:auto !important;
	

	
} 


.artInner img {
max-width:120px;
width:20vh;
}
 
  
}

@media all and (max-width: 960px){

  .fixed-ratio-resize {
	  width:30%;
  }		
	.socialTxt {
    display: none;
  }
  
  .fixed-ratio-resize2 {
	width: 25%; 
	float:left; 
	margin-right:3%;
	padding-bottom:8%;
	height: auto\9;
  }
  
  h1 { font-size:2vw;}

h2 {font-size:1vw;}
 #footer {
	font-size:1.3vw;	
}

 .pigeon {
width: 28%;
  bottom:-6%;

}


}

@media all and (max-width: 900px) and (orientation:portrait) and (min-width: 700px) {
	
 .pigeon {
width: 40%;
bottom:0;
}

	
}

@media all and (max-height: 680px) and (min-width:20px) and (orientation:landscape) {

#animationInner img {
width:30vh;
height:auto !important;
display:inline-block;
	
}
}

@media all and (max-width: 730px) and (orientation:portrait) {
  .fixed-ratio-resize2 {
	width:45%;
	display:block;
	margin-left:15%;
	padding:8%; 
	height: auto\9;
/*	float:none;*/
  }
 
 .profileScaleWide {
	display:block;
	width:39vw;
	height: auto\9;  /* IE8 */
  
}
 
.profileScale {
	display:none;
  }


 .pigeon {
width: 40%;
bottom:-0;

}



   	
}

@media all and (max-width: 720px) and (min-width: 100px) {
	span.photoSection {
	 font-size:1em;
	
}
}