html {
  background-image:linear-gradient(#eee, #aaa);
  min-height: 100%;
}

body{
	text-align: center;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
	font-size: 18pt;
	line-height: 22pt;
	min-height: 100%;
}

#container{
	width:100%;
	max-width: 500px;
	z-index: 100;
	position: relative;
	padding-bottom: 120px;
}

#logo{
	width: 100%;
}

#contact{
	width: 100%;
	text-align: center;
}


#gradient
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
	opacity: 0.05;
}

.picframe {
	background-color: #fafafa;
  border:solid 5vmin #333;
  border-bottom-color:#000;
  border-left-color:#222;
  border-radius:2px;
  border-right-color:#222;
  border-top-color:#444;
  box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
  box-sizing:border-box;
  display:inline-block;
  text-align: left;
  margin:10vh 10vw;
  min-height:80vh;
  padding: 3vmin 18vmin;
  position:relative;

  &:before {
    border-radius:2px;
    bottom:-2vmin;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
    content:"";
    left:-2vmin;
    position:absolute;
    right:-2vmin;
    top:-2vmin;
  }
  &:after {
    border-radius:2px;
    bottom:-2.5vmin;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content:"";
    left:-2.5vmin;
    position:absolute;
    right:-2.5vmin;
    top:-2.5vmin;
  }
}

#vancouver{
	position: absolute;
	bottom: 0px;
	width: 100%;
	left: 0px;
}

#holder{
	text-align: right;
}

#contact{
	font-size: 13pt;
	margin-top: 1em;
	position: relative;
	z-index: 100;
	line-height: 18pt;
}

.details{
	margin-top: 1em;
}

.break{
	display: inline;
}

a{
	color: #256c32;
	position: relative;

}

@media (max-width:1500px){
	.picframe {
		padding: 3vmin 25vmin;
	}
	#container{
		max-width: 400px;
	}
}

@media (max-width:800px){
	#contact{
		line-height: 17pt;
		font-size: 11pt;
	}
	
	.picframe{
		padding: 5vmin;
		margin:4vh 4vw;		
		font-size: 16pt;
	}
	
	#holder{
	}
	
	.break{
		display: block;
	}
}