/*my code*/
*{
   text-decoration: none;
}

header{
   background-color: #fff;
   width: 100%;
   height: 100px;
   position: fixed;
   top: 0px;
   right: 0px;
   left: 0px;
}

header .header-brand{
   font-family: catamaran;
   font-size: 24px;
   font-weight: 900;
   color: #111;
   text-transform: uppercase;
   display: block;
   margin: 0 auto;
   text-align: center;
   padding: 20px 0;
}

header nav ul{
margin: 0 auto;
width: fit-content;
}
header nav ul li{
   display: inline-block;
   float: left;
   list-style: none;
   padding: 0 16px;
   
}
header nav ul li a{
    font-family: catamaran;
   font-size: 24px;
   color: #111;
   text-transform: uppercase;
   
}
header .header-cases{
   display: none;
   
}
@media only screen and (min-width: 1000px){}
   header .header-brand{
 
   margin: 31px 0 ;
   text-align: left;
   line-height: 38px;
   padding: 0px 20px 0px  40px;
   border-right: 3px solid #111;
   float: left;

}

header nav ul{
margin: 20px 0px 0px 20px;
float: left;
}

header nav ul li a{
   
   line-height: 60px;

}

header .header-cases{
   display: block;
   font-family: catamaran;
   font-size: 24px;
   color: #111;
   text-transform: uppercase;
   line-height: 40px;
   border: 1px solid #111;
   float: right;
   margin-right: 38px;
   margin-top: 30px;
   padding: 0 20px;
}

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


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

}

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

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

.index-links div {
   margin: 30px 30px  0px;
   width: calc(100%-10px);
   height: 110px;
   background-color: #f2f2f2;
}

.index-links div h3 {
   font-family:  catamaran;
   font-size: 48px;
   font-weight: 200;
   line-height: 100px;
   color: hsl(0, 0%, 7%);
   text-align: center;
   text-transform: uppercase;

}

@media only screen and (min-width: 1000px){
   .wrapper{
      width: 900px;
      margin: 0 auto;
   }
   .index-banner{
   height: 450px;
 
   }
  .index-banner h1 {
   display: block;
   width: 520px;
   margin: 0 auto;

} 
  .index-links div {
   overflow: hidden;
   padding-bottom: 20px;

  }
   .index-links div {
   margin: 20px 10px  0px;

   height: 200px;
   background-color: #f2f2f2;
   float: left;
}
.index-boxlink-square{
      width: calc(25%-20px) !important;
}
.index-boxlink-rectangle{
      width: calc(50%-20px) !important;
}

.index-links div h3 {
 
   line-height: 200px;
}
}
/*CASES*/

.cases-links .cases-link{
   float: right;
   width: 230px;
   height: 230px;
   margin:  20px 10px 0px;
   background-color: #e3e3e3;
}
.cases-links {
   overflow: hidden;
   margin-bottom: 30px;
   

}
.cases-links .cases-link p{
   padding-top: 45%;
 font-family:  catamaran;
   font-size: 24px;
   font-weight: 200;
   color: hsl(0, 0%, 7%);
   text-align: center;
   text-transform: uppercase;

}
.cases-links h2{
 font-family:  catamaran;
   font-size: 48px;
   font-weight: 200;
   color: hsl(0, 0%, 7%);
   text-transform: uppercase;

}
/*CASE*/
.case-vid h2{
   font-family:  catamaran;
   font-size: 48px;
   font-weight: 200;
   text-align: center;
   color: hsl(0, 0%, 7%);
   text-transform: uppercase;

}
.case-vid video{
   display: block;
   margin: 0 auto;
   padding: 30px 0px;
}
.case-vid article h3{
    font-family:  catamaran;
   font-size: 48px;
   font-weight: 200;
   color: hsl(0, 0%, 7%);
   text-transform: uppercase;

}
.case-vid article div p{
    font-family:  catamaran;
   font-size: 16px;
   font-weight: 200;
   line-height: 24px;
   color: hsl(0, 0%, 7%);
   text-transform: uppercase;
   column-count: 3;
   padding-bottom: 10px;

}




/*footer*/
footer{
   width: calc(100%-80px);
   padding: 40px 0px;
   margin-top: 20px;
   background-color: #111;
   overflow: hidden;
}
footer url {
   width: fit-content;
   float: bottom;
   padding-left: 20px;

}
footer ul li {
   display: block;
   list-style: none;
 
   

}
footer ul li a {
   font-family: catamaran;
   font-size: 16px;
   color: #fff;
   line-height: none;
   

}
.footer-links-cases {
   display: none;
   
}
.footer-sm {
   width: 100px;
   float: right;
   display: block;
   justify-content: center;
   gap: 10px;
   height: auto;
   border-radius: 8px;
   
   
}
.footer-sm img {
   width: 100%;
  
}

@media only screen and (min-width: 1000px){
.footer-links-cases {
   display: block;
   
}
}

/* gallery*/

.gallery-links-h2 {
   font-family: catamaran;
   font-size: 28px;
   font-weight: 600;
   color: #111;
   text-transform: uppercase;
   text-align: center;
   padding: 20px;
   

}
.gallery-links{
   display: flex;
   flex-flow: row,wrap;
   justify-content: center;

}
.gallery-img{
 flex-basis: 200px;
 margin: 50px;
}
.gallery-img img{
   width: 15%;

}
@media only screen and (min-width: 760px){
   .gallery-links-h2{
      font-size: 28px;
   }
   
}