/* Avenir*/

@font-face {
font-family: Avenir;
font-style: normal;
src: url(fonts/Avenir.ttc);
}
@font-face {
font-family: AvenirNext;
font-style: regular;
src: url(fonts/Avenir_Next.ttc);
}
@font-face {
font-family: AvenirNextCondensed;
font-style: normal;
src: url(fonts/Avenir_Next_Condensed.ttc);
}

/*Caslon*/

@font-face {
font-family: Caslon;
font-style: normal;
src: url(fonts/ACaslonPro-Regular.otf);
}
@font-face {
font-family: Caslon;
font-style: bold;
src: url(fonts/ACaslonPro-Bold.otf);
}
@font-face {
font-family: Caslon;
font-style: italic;
src: url(fonts/ACaslonPro-Italic.otf);
}
@font-face {
font-family: Caslon;
font-style: oblique;
src: url(fonts/ACaslonPro-BoldItalic.otf);
}

/*Caslon Semi*/
@font-face {
font-family: CaslonSemi;
font-style: bold;
src: url(fonts/ACaslonPro-Semibold.otf);
}
@font-face {
font-family: CaslonSemi;
font-style: italic;
src: url(fonts/ACaslonPro-SemiboldItalic.otf);
}

/*NOW THE REAL STYLING*/
body{
    background-color: black;
	margin:0;
	padding:0px;
}
header{
	z-index: 1;
	height: 10vh;
	width: 100vw;
	position: sticky;
	-webkit-appearance: none;
	-webkit-box-shadow:0 0 15vh 7vh black!important;
	box-shadow: 0 0 15vh 7vh black;
	overflow: hidden;
	display:grid;
	grid-template-columns:1fr 1fr;
}
h1{
	grid-column:1/3;
	margin: auto;
	z-index: 5;
	font-family: Avenir;
	font-size: 30px;
	text-align: center;	
	text-shadow: 0 0 1px black;
	letter-spacing:0.1em;	
    -webkit-transform:scale(1,1.5); /* Safari and Chrome */
    -moz-transform:scale(1,1.5); /* Firefox */
    -ms-transform:scale(1,1.5); /* IE 9 */
    -o-transform:scale(1,1.5); /* Opera */
    transform:scale(1,1.5); /* W3C */
	transition: 2s ease;
	top: 50%;
}
h1 a{
		text-decoration:none;
		color: white;
}
h1:hover{
	transform: scale(1.25,1.875);
	/*Maybe change to transition*/

}
div.line{	
	grid-column: 1/2;
	z-index: 2;
	content:"";
	position: absolute;
	display: -moz-inline-stack;
	display:inline-block;
	*display: inline;
	background-color: white;
	width: 50vw;
	height: 1px;
	margin: 2px 0px;
	transition: 2s ease;
	left:0px;
}
div.line2{
	grid-column: 2/3;
	z-index: 2;
	content:"";
	position: absolute;
	display: -moz-inline-stack;
	display:inline-block;
	*display: inline;
	background-color: white;
	width: 50vw;
	height: 1px;
	margin: 2px 0px;
	transition: 2s ease;
	right:0px;
}
/*This is an awful way to do this, but I couldn't get the positioning to work so fuck it*/
#a{
		top:calc(45% - 6px);
}
#b{
		top:calc(45% - 3px);
}
#c{
		top:45%;
}
#d{
		top:calc(45% + 3px);
}
#e{
		top:calc(45% + 6px);
}
header:hover > div.line, header:hover > div.line2{
width:0%;
}


section.vign{
	z-index: 0;
	height: 80vh;
	background-image: url(images/main_alt.jpg);
	background-repeat: no-repeat;
	background-size: 100vw;
	overflow: hidden;
}
footer{
	z-index: 1;
	height: 10vh;
	-webkit-appearance: none;
	-webkit-box-shadow:0 0 15vh 7vh black!important;
	box-shadow: 0 0 15vh 7vh black;
	overflow: hidden;
}
footer ul{
text-align: center;
}
footer ul li{
display: inline-block;
margin: 0 75px;
}
footer ul li a{
font-family: Avenir;
font-size: 30px;
color: white;	
text-decoration: none;

}
footer ul li:after{
    content:"";
    display:block;
	position: relative;
    background-color:rgba(255,255,255,0.3);
    transition:.4s ease-in all;
	top:100.75%;
    height:3px !important;
    width:0%;
    left:50%;
}
footer ul li:hover:after{
	width:110%;
	left:-5%;
    background-color:rgba(255,255,255,1);
    transition:.5s ease all;
}


footer ul li img{
width: 30px;	
}
section{
font-family: Avenir;
}