/*INDEX*/
.index-banner { 
width: 100%;
height: calc(100vh - 100px); 
background-image: url("../img/portfolio/2022-10-16-120314-1.jpg");
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 h2 { 
font-family: Catamaran;
font-size: 20px; 
font-weight: 500; 
line-height: 30px;
color: #DDDDDD; 
text-align: center;
text-transform: uppercase;      }
.index-links div h3 { 
font-family: Catamaran;
font-size: 24px; 
font-weight: 600; 
line-height: 30px;
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-links div { 
margin: 20px 10px 0; 
height: 160px; 
background-color:  #474747; 
float: left; 
}
.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 { 
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 h2 { 
font-family: Catamaran;
font-size: 20px; 
font-weight: 500; 
line-height: 30px;
color: #DDDDDD; 
text-align: center;
text-transform: uppercase;      }
.index-links div h3 { 
font-family: Catamaran;
font-size: 24px; 
font-weight: 600; 
line-height: 30px;
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-links div { 
margin: 20px 10px 0; 
height: 160px; 
background-color:  #474747; 
float: left; 
}
.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: 40px; 
} 
}