*{
	font-family: 'Open Sans', sans-serif;
	font-color: #4d4d4d;
	text-decoration: none;
	margin:0;
	padding:0;
}

a {
color: #4d4d4d;
}
a:hover {
		font-weight: bold;
	}

#main-heading {
	font-family: 'Julius Sans One', sans-serif;
	text-align: center;
	letter-spacing: 0.5em;
	padding-left: 0.5em; /*to compensate for padding on right due to letter-spacing*/
	/*padding-bottom: 1em;*/
}

.bold-inline{
	letter-spacing: 0.2em;
	font-weight: bold;
}
.show-name{
	font-weight: bold;
	font-style: italic;
}
.caption{
	margin-top: 0.5em;
	text-align: center;
	font-style: italic;
	font-size: 90%;
}

/**********************************************************************************/
/* phone **************************************************************************/
/**********************************************************************************/
@media screen and (max-width: 800px) {
	body{
		margin:0;
		width:100%;
		height:100vh;
		background:#ffffff;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	header{
		width:100%;  
		height:60px; 
		line-height:60px;
	}
	.hamburger{
	  background:none;
	  position:absolute;
	  top:0;
	  line-height:45px;
	  padding:8px 15px 0px 15px;
	  color:#333333;
	  border:0;
	  font-size:1.4em;
	  font-weight:bold;
	  cursor:pointer;
	  outline:none;
	  z-index:10000000000000;
	}
	.cross{
		background:none;
		opacity: 0.8;
		position:absolute;
		top:0;
		padding:6px 15px 0px 16px;
		color:#333333;
		border:0;
		font-family:Font-awesome;
		font-size:3em;
		line-height:65px;
		font-weight:bold;
		cursor:pointer;
		outline:none;
		z-index:10000000000000;
	}
	#main-heading {
		font-size:1.8em;
		margin-top:0;
		margin-bottom:0;
		padding-bottom:0;
	}
	.page-name{
		letter-spacing: 0.2em;
		text-align: center;
		margin-bottom:1em;
		
	}
	.menu-mobile{
		z-index:1000000; 
		font-weight:bold;
		font-size:0.8em; width:100%; 
		background:#ffffff;
		opacity: 0.9;
		width: 150px;
		position:absolute; 
		padding-left:15px;
		text-align:left; 
		font-size:12px;
		}
	.menu-mobile ul {
		margin: 0; 
		padding: 0; 
		list-style-type: none; 
		list-style-image: none;
		}
	.menu-mobile li {
		display: block;   
		padding:15px 0 15px 0; 
		border-bottom:#dddddd 1px solid;
		margin-right:15px;
		}
	.menu-mobile li:hover{
		display: block;    
		border-bottom:#dddddd 1px solid;
		}
	.menu-mobile ul li a { 
		color:#666;
		text-decoration:none;  
		}
	.menu-mobile ul li a:hover {  
		color: #666; 
		text-decoration:none; 
		}
	.menu-mobile a{
		text-decoration:none;
		letter-spacing: 0.5em;
		color:#666;
		}
	.menu-mobile a:hover{
		text-decoration:none; 
		color:#666;
		}
	.glyphicon-home{
	  color:white; 
	  font-size:1.5em; 
	  margin-top:5px; 
	  margin:0 auto;
	}	
	.menu-desktop {    
		display: none;
	}
	.homepic {
		width: 90%;
		display: block;
		margin: 3em auto 0;
	}
	.content-wrapper{
		width: auto;
		margin: auto;
	}
	.col{
		margin: 0em 0.5em 0em 0em;
		float: left;
	}
	.col-1{
		width: 100%;
	}
	.col-2{
		width: 100%;
	}
	.col-2-wide{
		width: 100%;
	}
	.col-3{
		width: 100%;
	}

	.copyright {
	margin-top: 2em;
	clear: left;
	text-align: center;
	font-size: 0.8em;
	line-height: 3em;
	/*letter-spacing: 0.05em;*/
	font-size: 0.7em;
	
	}
	.caption {
	font-size: 0.8em;
	font-style: italic;
	text-align: center;
	letter-spacing: 0.03em;
	}
	.publication {
	text-align: left;
	}
	.spaced{
	letter-spacing: 0.4em;
	font-weight: bold;
	margin-bottom: 0.4em;
	}
	.content-wrapper{
		width: 95%;
		margin: auto;
	}
	.thumbnail-box{
		margin: 1em;
		float: left;
		height: 6em;
		width: 40%;
		/*background-color: LightGray;*/
	}
	.thumbnail-box-articles{
		margin-left: 0 0 1em -1em;
		/*float: left;*/
		/*height: 15em;*/
		width: 100%;
		/*background-color: LightGray;*/
	}
	.thumbnail-pic{
		display: block;  
		margin:auto;
		max-width: 80%;
		max-height: 80%;
	}
	.thumbnail-shadow{
		box-shadow: 3px 3px 10px gray;
	}
	.portrait{
		width: 100%;
	}
	.studio{
		width: 100%;
	}
	/**********************************************/			
	.copyright {
		clear: left;
		text-align: center;
		font-size: 0.8em;
		/*letter-spacing: 0.1em;*/
		line-height: 3em;
		margin-top: 2em;
	}
	.social {
		text-align: center;
	}
	.fa {
		padding: 7px 1px;
		/*font-size: 50px;*/
		width: 30px;
		text-align: center;
		text-decoration: none;
		margin: 10px 10px;
		border-radius: 50%;
	}

	.fa:hover {
		opacity: 0.7;
	}

	.fa-facebook {
		background: #3B5998;
		color: white;
	}
	.fa-google-plus {
		background: #dd4b39;
		color: white;
	}
	.fa-instagram {
		/*background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
		background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);*/
		background:#517fa4;
		color: white;
	}
	.fa-pinterest {
		background:#cb2027;
		color: white;
	}
	.fa-twitter {
		background: #55ACEE;
		color: white;
	}
}
/**********************************************************************************/
/* desktop ************************************************************************/
/**********************************************************************************/

@media screen and (min-width: 801px) { 
	body {
		font-size: 1.00em;
	}
	header {
		display: none;
	}
	.webpage-container{
		margin-top: 4em;
	}
	#main-heading {
		letter-spacing: 1em;
		padding-bottom: 1em;
	}
	.page-name{
		display: none;
	}
	.publication {
	font-family: Futurali;
	color: #333333;
	text-align: left;
	}
	.spaced{
		letter-spacing: 0.4em;
		font-weight: bold;
		margin-bottom: 0.4em;
	}
/**********************************************/	
	.menu-desktop{
		text-align: center;
		letter-spacing: 0.25em;
		padding-bottom: 1em;
	}	
	.menu-desktop li {
		display: inline;
	}
	.menu-desktop li a{
		padding: 0.5em;
		text-decoration: none;
		
	}
	.menu-desktop li a:hover {
		font-weight: bold;
	}
	.menu-desktop li .active {
		font-weight: bold;
	}
/**********************************************/	
	.homepic {
		max-width:60em;
		max-height:40em;
		display: block;
		margin: 0 auto;
	}
	.content-wrapper{
		width: 60em;
		margin: auto;
	}
	.thumbnail-box{
		margin: 0 1em 1em 1em;
		float: left;
		height: 18em;
		width: 18em;
	}
	.thumbnail-box-articles{
		margin: 0 1em 1em 1em;
		float: left;
		height: 18em;
		width: 18em;
	}
	.thumbnail-pic{
		display: block;  
		margin:auto;
		max-width: 90%;
		max-height: 90%;
	}
	.thumbnail-shadow{
		box-shadow: 3px 3px 10px gray;
	}
	
	.col{
		margin: 0em 0.5em 0em 0em;
		float: left;
	}
	.col-1{
		width: 19.5em;
	}
	.col-2{
		width: 19.3em;
	}
	.col-2-wide{
		width: 39em;
	}
	.col-3{
		width: 19.5em;
	}
	.portrait{
		width: 19em;
		margin-top: 0.4em;
		margin-bottom: 0.5em;
		float: left;
	}
	.studio{
		width: 100%;
	}
	.centre-content{
		text-align: center;
	}

	
/**********************************************/			
	.copyright {

		clear: left;
		text-align: center;
		font-size: 0.8em;
		/*letter-spacing: 0.1em;*/
		line-height: 3em;
	}
	.social {
		text-align: center;
	}
	.fa {
		padding: 7px 1px;
		/*font-size: 50px;*/
		width: 30px;
		text-align: center;
		text-decoration: none;
		margin: 10px 10px;
		border-radius: 50%;
	}

	.fa:hover {
		opacity: 0.7;
	}

	.fa-facebook {
		background: #3B5998;
		color: white;
	}
	.fa-google-plus {
		background: #dd4b39;
		color: white;
	}
	.fa-instagram {
		/*background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
		background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);*/
		background:#517fa4;
		color: white;
	}
	.fa-pinterest {
		background:#cb2027;
		color: white;
	}
	.fa-twitter {
		background: #55ACEE;
		color: white;
	}
}