/* @override http://dev.dyadcom.com/clf/trunk/css/med.css */



@media only screen and (min-width: 780px) {
	
	.book-film #video-holder #fake-poster #text{
		font-size:3em;
	}

	.book-film #video-holder #fake-poster #screen{
		display: none;
	}
	.book-film #video-holder{
		width: 780px;
		height: 439px;
	}
	
	.book-film .text-area img {
		margin-left: -10%;
		margin-right: -6%;
		width: 48%;
	}
	/*.book-film .text-area p{
		background-color: green;
	}*/
	html{
	    font-size: 16px;
	}
	.no-mobile{
		display: block!important;
	}
	.only-mobile,
	.mobile-only{
		display: none!important;
	}
	#paper{
		margin-top: 260px;
	}
	#top-white{
		position: fixed;
		background-color: white;
		height: 40px;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000000;
	}
	#bottom-white{
		position: fixed;
		background-color: white;
		height: 65px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000000;
	}
	#header{
		width: auto;
	}
	#header .center{
		background-color: #ecebe2;
		border-left: 1px solid #c6c2bb;
		border-right: 1px solid #c6c2bb;
		width: 375px;
		margin-left: -182px;
		left: 50%;
		height: 100%;
		position: absolute;
		z-index: 10000;
		background-color: #ecebe2;
		border-left: 1px solid #c6c2bb;
		border-right: 1px solid #c6c2bb;
		font-family: MrsEavesItalicRegular;
		width: 375px;
		height: 100%;
	}
	#header #subs{
		margin-top: 0!important;
		background-color: transparent;
		border-bottom: none;
	}
	#header #subs div.sub{
		height: 100%;
		width: 50%;
		position: relative;
		display: inline;
		float: left;
		margin: 0;
	}
	
	#header #subs{
		position: absolute;
		top: 0;left: 0;right: 0;bottom: 0;
	  	font-size: 35px;
	  	color: #6a6865;
	  	padding-top: 10px;
	}
	
	
	#header #subs div p{
		background-color: #ecebe2;
		display: inline-block;
		margin-top: 1.35em;
		padding: 0 10px;
	}
	
	#header #subs div.left p{
		margin-right: 190px;
	}
	#header #subs div.right .links{
		position: absolute;
		left: 183px;
		right:0%;
	}
	#header #subs div.left .links{
		position: absolute;
		right: 183px;
		left:0%;
	}
	#header #subs div.sub .links{
		font-family: MrsEavesPetiteCapsRegular;
		font-size: .6em;
		letter-spacing: 2px;
		text-transform: uppercase;
	}
	#header #subs div.sub .links a{
		height: 30px;
		padding: 0px 0;
		width: auto;
	}
	
	
	#copy{
		display: block;
	}
	h1{	
		width: 296px;
		padding: 67px 0 0;
	}
	h2{
		letter-spacing: 2px;
		margin-top: -10px;
		font-size: 20px;
	}
	
	
	#header #subs div.left p{
		margin-right: 190px;
	}
	
	#header #subs div.left p:hover{	
	}
	#header #subs div.right p{
		margin-left: 190px;
	}
	#header{
		position: fixed;
		background-color: #ecebe2;
		height: 140px;
		z-index: 10000;
		border-top: 22px solid #ecebe2;
		border-bottom: 22px solid #ecebe2;
		top: 40px;
		left: 10px;
		right: 10px;
	  	-webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	}
	.low-link{
		font-size: 20px;
		letter-spacing: 1px;
	}
	.high-link{
		font-size: 35px;
		line-height: 1.7em;
	}
	#left-white{
		position: fixed;
		background-color: white;
		width: 55px;
		top: 0;
		bottom: 0;
		z-index: 1000000;
		width:10px;
	}
	#right-white{
		position: fixed;
		background-color: white;
		width: 10px;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 1000000;
	}
	#left-line{
		position: fixed;
		border-right: 1px solid #c6c2bb;
		width: 5px;
		top: 35px;
		bottom: 60px;
		z-index: 1000001;
	}
	#right-line{
		position: fixed;
		border-left: 1px solid #c6c2bb;
		width: 5px;
		top: 35px;
		bottom: 60px;
		right: 0;
		z-index: 1000001;
	}
	#top-line{
		position: fixed;
		border-bottom: 1px solid #c6c2bb;
		height: 35px;
		left: 5px;
		right: 5px;
		top: 0;
		z-index: 1000001;
	}
	#bottom-line{
		position: fixed;
		border-top: 1px solid #c6c2bb;
		height: 60px;
		left: 5px;
		right: 5px;
		bottom: 0;
		z-index: 1000001;
	}
	#top{
		background-size: auto 100%;
		left: 5px; right: 5px;
		top: 10px; height: 22px;
	}
	#footer{
		left: 10px;
		right: 10px;
		font-size:16px;
		text-transform: uppercase;
		position: fixed;
		z-index: 1000000;
		bottom: 65px;
		padding: 5px 0;
		font-family: MrsEavesPetiteCapsRegular;
	  	-webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	  	background-color: #ecebe2;
	}
	.border{
		z-index: 100000000000000;
		position: fixed;
	}
	
	#nav-sub li{
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: block;
		width: 100%;
	}
	
	#nav-sub li.first{
		display: block;
		width: 100%;
		font-size: 1.7em;
		height: 40px;
		letter-spacing: 0;
		text-transform: none;
	  	font-family: "bickham-script-pro";
		padding-top: 0px;
	}
	#header #subs div.sub .links #nav-sub li.first{
		margin-bottom: 10px;
	}
	#header #subs div.sub .links #nav-sub li::after{
		content: '';
	}
	#grid .tile span{
		font-weight: normal;
		font-family: MrsEavesPetiteCapsRegular;
		text-align: center;
		display: block;
		margin-top: 10px;
		font-size: 23px;
		color: #4b4a4b;
		-webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
		text-transform: lowercase;
		line-height: .7em;
	}
	#grid .tile span{
		font-size: 22px;
		line-height: 1.5em;
	}	
	#grid .tile::after{
	    bottom: 33px;
	}
	#grid .tile::after{
	    border: 1px solid #ccc;
	    content: "";
	    position: absolute;
	    top: -5px;
	    bottom: 37px;
	    left: -5px;
	    right: -5px;
	}
	#canvas #images{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: auto;
		overflow: hidden;
		margin-bottom: 0;
	}
	.estate #canvas,
	#canvas{
		position: absolute;
		top: 235px;
		left: 70px;
		right: 70px;
		bottom: 80px;
	}
	.text-area{
	    max-width: 960px;
	    padding-bottom: 80px;
    }
	
	.text-area p{
		text-align: justify;
	}
	.book-film .text-area:last-child{
		padding-bottom: 10em;
	}
	#grid a{
		width: 23%;
	}
	.text-area .col-group-two{
	    -webkit-column-count: 2; 
	    -moz-column-count: 2; 
	    column-count: 2;
	}
	#sub-nav{
		display: block;
		font-size: .9em;
		position: fixed;
		z-index: 10000;
		top: 205px;
		left: 55px;
		right: 45px;
		background-color: #ecebe2;
		padding: 0;
	}
	#sub-nav li{
		display: inline-block;
		max-width: 300px;
		font-size: .9em;
		vertical-align: middle;
	}
	
	#scroll-images{
		position: absolute;
		top: 235px;
		left: 70px;
		right: 70px;
		bottom: 110px;
	}
	#scroll-images .img-holder{
		width: auto;
		height: 90%;
	}
	#scroll-images .img-holder img{
		height: 100%;
		width: auto;
	}
	#copy{
		text-align: center;
		z-index: 10000000;
		position: fixed;
		bottom: 5px;
  		left: 0px;
  		right: 0px;
	}
	#scroll-images .img-holder span{
	  	display: inline-block;
	}
	.portfolio #footer{
		display: block;
	}
	#paper.history{
		min-height: 800px;
		overflow: hidden;
		margin-top: 131px;
		padding-bottom: 255px;
		position: relative;
	}
	#stage{
		margin-left: -100%;
		margin-right: 0;
		width: 300%;
		position: relative;
		-webkit-transition: margin-left 1s;
		-moz-transition: margin-left 1s;
		transition: margin-left 1s;
		padding-left: 0px;
		margin-top: 50px;
	}
	#stage .wing{
		width: 33.3333333%;
		height: 1px;
		float: left;
	}
	#center-stage{
		position: relative;
	}
	#center-timeline{
		position: absolute;
		text-align: left;
		left: 50%;
		right: 55px;
	}
	.event{
		position: absolute;
		display: inline-block;
		text-align: left;
		max-width: 400px;
		font-size: 17px;
		color: #583f14;
		font-family:"MrsEaves";
	}
	.event .button{
		text-transform: uppercase;
		font-size: .7em;
		border: 1px solid #c6c2bb;
		padding: 4px 4px 3px;
		display: inline-block;
		font-family: "lucida grande";
		color:  grey;
	}
	.event .button:hover{
		background-color: #dedede;
		cursor: pointer;
		color: black;
	}
	.timeline-nav.no-mobile{
		display: inline-block!important;
	}
	
	
	.history #intro{
		font-size: 3em;
		position: absolute;
		margin-top: -20px;
		z-index: 101;
		width: 100%;
		text-align: center;
	}
	
	.history #outro{
		position: absolute;
		bottom: 100px;
		z-index: 101;
		width: 100%;
		left: 50%;
		right: 0;
		margin-left: -300px;
		text-align: center;
	}
	
	#timeline-bg{
		display: block;
		position: absolute;
		width: 100%;
		margin-left: -35%;
		z-index: 1;
		right: 55px;
		left: 55px;
	}
	#timeline-bg img{
		width: 65%;
	}
	.timeline-nav .down-arrow{
		display: none;
	}
	.left-right-offset .timeline-nav .left-arrow{
		display: inline-block;
	}
	.left-right-offset .timeline-nav .right-arrow{
		display: none;
	}
	.timeline-nav .right-arrow{
		display: inline-block;
	}

	.timeline-return{
		position: fixed;
		top: 20%;
		left: 50%;
		margin-left: 350px;
	}
	
	#right-wing .timeline-return{
		right: auto;
		margin-left: -500px;
	}
	#right-wing .right-back{
		display: none;
	}
	#left-wing .left-back{
		display: none;
	}
	.extra-holder{
		display: none;
		width: 600px;
		margin: 0 auto;
		text-align: left;
		position: relative;
		padding-top: 1em;
		z-index:10;
		/*height: 800px;
		overflow:scroll;*/
	}
	.extra-holder img{
		height: 400px;
	}
	.extra-holder .smaller{
		font-size: .85em;
	}
	.extra-holder h3,
	.extra-holder h4{
		font-weight: normal;
		text-transform: uppercase;
		margin-bottom: 0;
	}
	.extra-holder ul{
		padding: 0;
		overflow: hidden;
		margin-top: 0;
	}
	.rule{
		position: absolute;
		margin-left: 8px;
		width: auto;
		margin-top: 0px;
	}
	.rule div{
		text-indent:0px;
		font-size: 12px;
		background-color: rgba(236,235,226,0.77);
		border: 1px solid #c6c2bb;
		width: 3em;
		padding: 3px 0 0;
		font-size: 18px;
		color: #7b5a1f;
		text-align: center;
		margin-top: -15px;
		margin-left: -1.5em;
	}
	.left-right-offset .rule div{
		margin-left: auto;
		margin-right: -1.57em;
	}

	.event-images img{
		height: 300px;
		width: auto;
	}
	.event-images img.small{
		height: 175px;
	}
	.event-images img.medium{
		height: 240px;
	}
	.event-images img.bordered{
		outline: 1px solid #9e9b96;
		outline-offset:5px;
		margin-left: 5px;
	}
	.left-right-offset .event-images img.bordered{
		margin-left: 0;
		margin-right: -3px;
	}
		
	.event-title{
		
	}
	hr{
		display: block;
		position: fixed;
		top: 207px;
		z-index: 10000000;
		left: 55px;
		right: 55px;
	}

	#spine{
		display: block;
		position: absolute;
		top: 0px;
		left: 50%;
		margin-left: -23px;
		z-index: 100;
		background-image: url(../images/layout/tick.png);
		background-repeat: repeat-y;
		background-position: center;
		margin-top: 65px;
		/*z-index: 1000;*/
	}
	
	#spine .first{
		margin-top: 133px;
	}
	
	.year-mark{
		margin: 198px auto;
		opacity:0;
	}

	.draggable{
		opacity:1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		max-width: 350px;
		position:absolute;
		z-index: 200;
	}
	.left-right-offset {
		z-index:100;
	}
	.left-right-offset .draggable-offset{
		margin-left: -100%;
		/*background-color: rgba(255,0,0,.03);*/
	}
	.left-right-offset .draggable-offset .event-text,
	.left-right-offset .draggable-offset .event-images{
		text-align: right;
	}
/*	.event-body p{
		margin-top: 1em;
	}*/
	.draggable-offset{
		width: 100%;
		height: 100%;
		/*outline: 1px solid #9e9b96;*/
		position: relative;
		/*background-color: rgba(0,0,255,.03);*/
	}
	
	div.tours-temp .text-area:before{
		display: none;
	}
	div.tours-temp #images{
		width: 790px;
	}
	.tours .text-area img{
		width: 650px;
	}

	.tours .text-area>div{
		width: 66%;
		margin-right: 4%;
		float: left;
	}
	.tours .text-area #reservations{
		width: 30%;
		margin-right: 0;
	}
	
	.text-area::before{
		display: block;
	}
	#footer-holder{
		position: fixed;
		z-index: 10000000;
		bottom: 0;
		right: 0;
		left: 0;
		outline: 1px solid white;
		padding-bottom: 0;
	}
	#photog-credit{
		right: 50px;
		top: auto;
	}
	
	#footer-holder #copy{
		padding-left: 0px;
	}
    
	#footer-holder #copy span{
		display: inline-block!important;
	}
	#contact-button,
	#photog-credit{
		position: fixed;
	  	padding-right: 0px;
	  	left: 50%;
	  	bottom: -5px;
	} 
	#contact-button{
		text-align: left;
	  	left: 50px;
	  	right: 50%;
	}
	#contact-button .contact-text,
	#photog-credit .photo-text{
		position: absolute;
		width: auto;
		margin-left: 0;
		left: -100%;
		bottom: 65px;
		right: 0px;
		text-align: right;
		padding: 0 1em;
		background-color: white;
		background-color: rgba(255,255,255,.95);
		border: 1px solid #ccc;
	}
	#photog-credit .photo-text p{
		background:transparent;
		outline: none;
		max-width: none;
	}
	#contact-button .contact-text{
		left: 0;
		right: -100%;
		text-align: left;
	}
	#before-scroll-images .img-holder{
		width: 80%;
		margin-left: 10%;
		margin-top: 5em;
	}
	
	.reveal-link{
		display: inline;
	}
}

@media only screen and (min-width: 1025px) {

	.context-event{
		display: inline-block!important;
		-webkit-font-smoothing: antialiased!important;
	    -moz-osx-font-smoothing: grayscale!important;
	  	font-family: "bickham-script-pro";
	  	font-size: 1.5em;
	  	line-height: 1em;
	  	position: absolute;
	  	opacity: .6;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
		max-width: 45%;
	}
	
	.context-event p{
		margin-top: 0;
	}
}