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

	* { 
		margin: 0;
		padding: 0;
	}
	body { 
		font-family: Georgia, serif;
        font-size: 18px;
        line-height: 178%;
        text-align: left;
	} 
    a {
		text-decoration: none;
		color: #970c4f;
	}
    .center {
		max-width: 800px; 
		position: relative;
		margin: 0 auto;
        padding: 0 20px 40px;
	}
    #opening-image { 
		max-width: 800px;
		margin: 20px auto 40px;
        padding: 0;
    }
	section {
        width: 100%; 
	}	
    #about {
	}
    #samples {  
    }
	@media screen and (max-width: 640px) {
    #opening-image {
		margin: 20px auto 40px;
	}
    #about {
        padding: 10px 0 30px;
		font-size: 15px;
        line-height: 170%;
	}
    #work {
    }
	#references {
        padding-bottom: 65px;
        font-size: 70%;
        line-height: 160%;
	}
	}
    p {
		margin: 0 0 20px;
	}
	ol {
		margin-top: 1em;
		margin-left: 1em;
	}
	ul {
		list-style: none;
		margin-top: 1em;
 		padding-left: 1em;
 		text-indent: -1em;
	}
	li {
        margin-top: 1.75em; 
	}
	img {
		width: 100%;
	}
	#l {
		display: block;
	}
	#s {
		display: none;
	}
	@media screen and (max-width: 480px) { 
	#l {
		display: none;
	}
	#s {
		display: block;
	}
    }
	figcaption {
		padding: 6px 0 40px;
		font-size: 14px;
        line-height: 150%;
		color: #A49580;
	}
    sup { 
    	vertical-align: text-top;
    	font-size: smaller;
		position: relative; 
		line-height: 0;
		cursor: pointer;
	}
	.break {
		word-break: break-all;
	}
	.note {
	} 
	.note-bg {	
		display: none;
    	position: fixed; 
		z-index: 2; 
		top: 0;
    	left: 0;
		box-sizing: border-box;
    	width: 100%; 
    	height: 100%; 
		padding: 20px;
    	overflow: auto; /* enable scroll if needed */
    	background-color: rgb(22,0,12); /* fallback color */
    	background-color: rgba(10,0,5,0.9);
	}
	.note-info {
		position: relative;
  		top: 34%;
  		-webkit-transform: translateY(-34%);
  		-ms-transform: translateY(-34%);
  		transform: translateY(-34%);
		max-width: 688px;
		border-top: solid 1px #FFF;		
		border-bottom: solid 1px #FFF;
		margin: 0 auto;
		padding: 20px 0 45px;
		color: #FFF;
        font-size: 18px;
        line-height: 178%;
        
        padding-left: 1em;
 		text-indent: -1em;
	}
    .note-close {
		position: absolute;
		width: 24px;
		height: 30px;
		top: 0;
		right: 0;
		z-index: 2;
		cursor: pointer;
		border: none;
        margin: -30px 0;
		padding: 5px;
		background: url('collage/img/close-note.svg') no-repeat center right;
		background-size: 8px 8px;
		-moz-background-size: 8px 8px;
		-webkit-background-size: 8px 8px;
	}
	button:focus { 
		outline: 0 !important; 
	}
    @media screen and (max-width: 640px) { 
    figcaption {
		font-size: 13px;
        padding: 6px 0 20px;
	}
    .note-info {
		font-size: 14px;
		line-height: 150%;
	}
	}   
/* SLIDES */
#wait {  /* wait to display after slider JQUERY is ready */
display: none; 
}  
.slideshow.loading {
visibility: hidden;
}
.slideshow.loading > * {
display: none;
}
.slideshow {
position: relative;
width: 100%;
-webkit-touch-callout: none; /* prevent flash on touch */
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* prevent flash on touch */  
}
.slideshow .wrapper {
overflow: hidden;
}
.slideshow .slides {
position: relative;
}
.slideshow .slide {
float: right;
}
.slideshow .slide figure img {
display: block;
width: 100%;
box-sizing: border-box;
/*padding: 40px;
border: solid 3px #f7f3ee;*/
    
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
}
@media screen and (max-width: 640px) { 
.slideshow .slide figure img {
    padding: 30px;
	}  
}
/* SLIDE CONTROLS */
.slideshow .buttons {
position: relative; /* prevents next and previous buttons from covering caption text */
}
.slideshow .prev,
.slideshow .next {
position: absolute;
width: 50%;
height: 100%;
}
.slideshow .prev {
left: 2px;
cursor: url(https://civicnature.com/pi/left.png) 0 15, url(https://civicnature.com/pi/left.cur) 0 15, w-resize;
}
.slideshow .next {
right: 2px;
cursor: url(https://civicnature.com/pi/right.png) 15 15, url(https://civicnature.com/pi/right.cur) 15 15, e-resize;
}
@media (hover: none) {
.slideshow .slide figure img {
padding: 20px;
border-left: 0;
border-right: 0;
}
.slideshow .prev {
    left: 0;
    background: url('https://civicnature.com/pi/left.svg') no-repeat center left;
    background-size: 10px 16px;
    -moz-background-size: 10px 16px;
    -webkit-background-size: 10px 16px;
}
.slideshow .next {
    right: 0;
    background: url('https://civicnature.com/pi/right.svg') no-repeat center right;
    background-size: 10px 16px;
    -moz-background-size: 10px 16px;
    -webkit-background-size: 10px 16px;
}
}