/*INDEX*/

.index-banner { 
width: 100%; 
height: calc(100vh - 100px); 
background-image: url('../img/banner-events.jpeg');
background-repeat: no-repeat;
background-position: center; 
background-size: cover; 
display: table;
}

.vertical-center { 
display: table-cell;
vertical-align: middle; 
}

.index-banner h2 { 
font-family: Catamaran; 
font-size: 60px; 
font-weight: 900; 
line-height: 70px; 
color: #fff; 
text-align: center; 
text-shadow: 2px 2px 8px #111;
}

.index-banner h1 {
font-family: Cormorant Garamond;
font-size: 28px; 
font-weight: 100; 
font-style: italic; 
line-height: 40px; 
color: #fff; 
text-align: center; 
text-shadow: 2px 2px 8px #111; 
}

.index-links div { 
margin: 16px 16px 0; 
width: calc(100% - 32px);
height: 100px; 
background-color: #474747; 
}

.index-links div h3 { 
font-family: Catamaran;
font-size: 28px; 
font-weight: 600; 
line-height: 100px;
color: #DDDDDD; 
text-align: center;
text-transform: uppercase; 
}

.index-events div { 
margin: 16px 16px 0; 
width: calc(100% - 32px);
height: 300px; 
background-color: #949494; 
}

.index-events div h3 { 
font-family: Catamaran;
font-size: 28px; 
font-weight: 600; 
line-height: 100px;
color: #DDDDDD; 
text-align: center;
text-transform: uppercase; 
}
@media only screen and (min-width: 1000px){ 
.wrapper {
width: 1000px;
margin: 0 auto; 
}

.index-banner { 
height: 450px; 
}

.index-banner h1 { 
display: block;
width: 560px;
margin: 0 auto; 
}

.index-links { 
overflow: hidden; 
}
	
.index-events { 
overflow: hidden; 
}

.index-links div { 
margin: 20px 10px 0; 
height: 230px; 
background-color:  #474747; 
float: left; 
}
	
.index-events div { 
margin: 20px 10px 0; 
height: 300px; 
background-color:  #949494; 
float: left; 
}
.index-event-square { 
width: calc(50% - 20px) !important; 
}
.index-boxlink-square { 
width: calc(25% - 20px) !important; 
}

.index-boxlink-rectangle { 
width: calc(50% - 20px) !important; 
}
.index-boxlink-1 { 
width: calc(25% - 20px) !important; 
}
.index-boxlink-2 { 
width: calc(50% - 20px) !important; 
}
.index-boxlink-3 { 
width: calc(75% - 20px) !important; 
}
.index-boxlink-4 { 
width: calc(100% - 20px) !important; 
}
.index-links div h3 {
line-height: 100px; 
} 
	
.index-events div h3 {
line-height: 430px; 
} 
}