@font-face {
    font-family: 'blackletter686_btregular';
    src: url('tt1044m-webfont.woff2') format('woff2'),
         url('tt1044m-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after,
.row:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix,
.row {
    *zoom: 1;
}

html {
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
	color: #fff;
	background: url(../img/oubliette-home2.jpg) no-repeat top center;
	background-size: cover;
	background-position: top right;
	position: relative;
}

body.hours {
	background: url(../img/oubliette-hours.jpg) no-repeat center;
	background-size: cover;
}

.respImg {
	width: 100%;
	height: auto;
}

p, h1, h2, h3, h4, h6 {
	margin-top: 0;
}

#logo {
	width: 50%;
	margin-left: 25%;
}

.logo {
	fill:#FFFFFF; 
	font-family:'blackletter686_btregular'; 
	font-size:422.8185px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.67);
	width: 100%;
}

.blackletter {
	font-family:'blackletter686_btregular'; 
}



.aspectRatio {
  	width: 100%;
  	position: relative; /* If you want text inside of it */
}

.aspectRatioContentWrap {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}

#aspectRatio {
	padding-top: 75.066666666%; /* 1:1 Aspect Ratio */
}

.homeContent {
	width: 90%;
	margin: 25vh auto 0 auto;
	text-align: center;
}

.blackletter {
	font-family:'blackletter686_btregular'; 
}

.homeDescription {
	text-align: center;
	font-size: 12vw;
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.67);
	margin: 0 0 0 32.5%;
	width: 35%;
}

.mHide {
	display: none;
}

.opening {
	font-family: Montserrat;
	font-weight: 900;
	color: #fff;
	text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
	width: 100%;
	text-align: center;
	font-size: 5vw;
	margin-top: 5vw;
	margin-bottom: 0;
}

.address {
	font-family: Montserrat;
	font-weight: 400;
	color: #fff;
	text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
	width: 100%;
	text-align: left;
	font-size: 1.55vw;
	margin-top: 1vw;
	line-height: 2.17vw;
}

.mOnly {
	display: block;
}

.pHome {
	font-family: Montserrat;
	font-weight: 400;
	color: #fff;
	text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
	width: 90%;
	text-align: left;
	font-size: 1em;
	line-height: 1.5em;
	margin-top: 1vw;
	position: absolute;
	bottom: 3em;
	padding: 1em;
}

.pHours {
	font-family: Montserrat;
	font-weight: 400;
	color: #fff;
	text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
	text-align: center;
	font-size: 1.8em;
	line-height: 2.2em;
	margin-top: 0;
	padding: 1em;
	position: relative;
	top: 1vh;
}

.pAddress {
	font-family: Montserrat;
	font-weight: 400;
	color: #fff;
	text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
	text-align: center;
	font-size: 1.8em;
	line-height: 2.2em;
	margin-top: 0;
	padding: 1em;
	position: relative;
	top: 10vh;
}

#bgDiv {
	display: none;
}

#aContact {
	color: #fff;
	font-size: 1.5em;
	font-weight: 700;
	cursor: pointer;
	position: absolute;
	z-index: 5;
	text-decoration: none;
	bottom: 2em;
	text-align: center;
	width: 100%;
}



footer {
	position: absolute;
	bottom: 0;
	width: 100%;
}

footer p {
	color: #fff;
	text-align: center;
	font-family: Montserrat;
	font-weight: 600;
	font-size: 1em;
	text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
}

footer p a:link,
footer p a:visited {
	color: #fff;
	text-decoration: none;
}

footer p a:hover,
footer p a:active {
	color: #fff;
	text-decoration: underline;
}



/* ************************************************************************************************************* */

/* Reusable column setup */
.col {
	border: 0px solid rgba(0,0,0,0);
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-moz-background-clip: padding-box !important;
	-webkit-background-clip: padding-box !important;
	background-clip: padding-box !important;
}

.col {
	margin-left:0%;
	padding:0 1.5%;
}

.col.no-padding {
	padding: 0 !important;
}
    
.row .col:first-child {
	margin-left:0;
}

.row .col .row .col:first-child {
	padding-left:0;
}  

.row .col .row .col:last-child {
	padding-right: 0;
} 



/* ----------------------------------------------------------------------------- 
    
	Column Default Names and Sizes
	
    Span 1:    8.33333333333%
    Span 2:    16.6666666667%
    Span 3:    25.0%
    Span 4:    33.3333333333%
    Span 5:    41.6666666667%
    Span 6:    50.0%
    Span 7:    58.3333333333%
    Span 8:    66.6666666667%
    Span 9:    75.0%
    Span 10:    83.3333333333%
    Span 11:    91.6666666667%
    Span 12:    100%
    
----------------------------------------------------------------------------- */   
    
.span_1 {
	width:100%;
}
.span_2 {
	width:100%;
}
.span_3 {
	width:100%;
}
.span_4 {
	width:100%;
}
.span_5 {
	width:100%;
}
.span_6 {
	width:100%;
}
.span_7 {
	width:100%;
}
.span_8 {
	width:100%;
}
.span_9 {
	width:100%;
}
.span_10 {
	width:100%;
}
.span_11 {
	width:100%;
}
.span_12 {
	margin-left:0;
	width:100%;
}






@media screen and (min-width: 768px)  /* ≥ 768px */
{

	.col {
		margin-left:0%;
		padding:0 1.5%;
	}

	.col.no-padding {
		padding: 0 !important;
	}
        
	.row .col:first-child {
		margin-left:0;
	}    
        
	.span_1 {
		width:8.33333333333%;
	}
	.span_2 {
		width:16.6666666667%;
	}
	.span_3 {
		width:25.0%;
	}
	.span_4 {
		width:33.3333333333%;
	}
	.span_5 {
		width:41.6666666667%;
	}
	.span_6 {
		width:50.0%;
	}
	.span_7 {
		width:58.3333333333%;
	}
	.span_8 {
		width:66.6666666667%;
	}
	.span_9 {
		width:75.0%;
	}
	.span_10 {
		width:83.3333333333%;
	}
	.span_11 {
		width:91.6666666667%;
	}
	.span_12 {
		margin-left:0;
		width:100%;
	}

	.homeContent {
		width: 50%;
		margin: 0 auto;
		text-align: center;
	}

	.homeDescription {
		text-align: center;
		font-size: 4vw;
		color: #fff;
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.67);
		margin: 0 0 0 0;
		width: 100%;
	}

	.opening {
		font-family: Montserrat;
		font-weight: 900;
		color: #fff;
		text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
		width: 100%;
		text-align: center;
		font-size: 3vw;
		margin-top: 1vw;
	}

	#logo {
		width: 100%;
		margin-left: 0;
	}

	.address {
		font-family: Montserrat;
		font-weight: 400;
		color: #fff;
		text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
		width: 100%;
		text-align: left;
		font-size: 1.55vw;
		margin-top: 1vw;
		line-height: 2.17vw;
	}

	.pHome {
		font-family: Montserrat;
		font-weight: 400;
		color: #fff;
		text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
		width: 100%;
		text-align: left;
		font-size: 1.55vw;
		margin-top: 1vw;
		line-height: 2.19vw;
		position: relative;
		bottom: auto;
		padding: 0;
	}

	.pHours {
		font-family: Montserrat;
		font-weight: 400;
		color: #fff;
		text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
		text-align: center;
		font-size: 2vw;
		line-height: 2.5vw;
		margin-top: 1vw;
		padding: 0;
		width: 50%;
		position: absolute;
		top: 40vh;
	}

	.pAddress {
		font-family: Montserrat;
		font-weight: 400;
		color: #fff;
		text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
		text-align: center;
		font-size: 2vw;
		line-height: 2.5vw;
		margin-top: 1vw;
		margin-bottom: 0;
		padding: 0;
		width: 50%;
		position: absolute;
		top: 25vh;
	}

	.homeLeft {
		position: relative;
		z-index: 2;
	}

	#bgDiv {
		background-color: rgba(0,0,0,.6);
		height: 100%;
		position: fixed;
		z-index: 1;
		width:33.3333333333%;
		display: block;
	}

	main,
	.homeFull { 
		height: 100%;
	}

	span.mHide {
		display: inline;
	}

	.mOnly {display: none;}

	#aContact {
		color: #fff;
		font-size: 2vw;
		font-weight: 700;
		cursor: pointer;
		position: absolute;
		z-index: 5;
		text-decoration: none;
		bottom: 2vw;
		right: 2vw; 
		width: auto;
	}

	footer p {
		color: #fff;
		text-align: center;
		font-family: Montserrat;
		font-weight: 600;
		font-size: 2em;
		text-shadow: 1px 4px 3px rgba(0, 0, 0, 0.67);
	}

}