@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Overpass:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
}
html{
    
}
body{
    background: #2b5fadff;
    //background: #999;
    overflow-y: scroll;
    font-family: "Helvetica" ,"Arial", "Roboto";
    transition: filter .3s;
  
}
header{
    top: 0;
    right: 200px;
  position: absolute;
}
#signature{
    display: grid;
    align-items: center;
    justify-content: center;
    background: #2150ac;
    color: white;
    width: 300px;
    padding: 25px;
}

#signature img{
    width: 100%;
}
main{
    height: 960px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 2000px;
}
#tiles{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 1000px;
    margin: 0 auto;
    margin-top: -20px;
    justify-content: center;
    align-items: center;
}
main .tile{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-content: center;
    width: 100%;
    height: 100%;
}
main .tile:nth-of-type(1){
    background-image: url("images/slideshow102735_6.jpg");
    background-position: -400px center;
    background-size: fill;
    filter: grayscale(65%);
    filter: sepia(100%) saturate(300%) brightness(80%) hue-rotate(340deg);
}
main .tile:nth-of-type(3){
    background-image: url("images/slideshow102774_1.png");
    background-position: -400px center;
    background-size: fill;
    filter: grayscale(65%);
    filter: sepia(100%) saturate(300%) brightness(80%) hue-rotate(250deg);
}
main .tile:nth-of-type(5){
    background-image: url("images/slideshow102739_17.jpg");
    background-position: -400px center;
    background-size: fill;
    filter: grayscale(65%);
    filter: sepia(100%) saturate(300%) brightness(80%) hue-rotate(80deg);
}
main .tile:nth-of-type(2){
    background-image: url("newman tile 1.png");
    background-size: cover;
}
main .tile:nth-of-type(4){
    background-image: url("newman tile 4.png");
    background-size: cover;
}
main .tile:nth-of-type(6){
    background-image: url("newman tile 3.png");
    background-size: cover;
}
.tile-title{
    color: #ccc;
    font-size: 80pt;
    font-weight: 400;
    font-style: italic;
    margin-top: 100px;
    margin-left: 50px;
    grid-row:1/2;
    grid-column: 1/2;
    transition: .3s;
    opacity: 1;
}
.tile-text{
    color: #ccc;
    font-size: 30pt;
    font-weight: 100;
    font-style: italic;
    margin-top: 300px;
    margin-left: 50px;
    grid-row:1/2;
    grid-column: 1/2;
    opacity: 0;
    transition: .3s;
}
main .tile:hover .tile-title{
    margin-top: -100px;
    opacity: 0;
}
main .tile:hover .tile-text{
    margin-top: 100px;
    opacity: 1;
}
#hero{
    background-image: url('images/slideshow102734_11.jpg');
    background-size: cover;
    background-position: center center;
    height: 600px;
    width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-temnplate-rows: 1fr;
}
#hero-title{
    font-size: 3.7vw;
  position: absolute;
    text-align: left;
    z-index:100;
    grid-row: 1/2;
    grid-column: 1/2;
    font-style: italic;
    font-family: "Jost";
  left: 20vw; 
  top: 310px;
  //background: #282828c0;
  //background: #124c;
  //background: #dddc;
  //width: 30vw;
  padding: 20px;
  color: #ccc;
  //color: #222;
  height: 11vw;
  max-height: 200px;
  //max-width: 600px;
  color: #eee;
  font-size: 85pt;
  font-weight: 500;
  text-shadow: 4px 4px 0 black;
}
#hero-text{
  position: absolute;
    font-size: 1.3vw;
    text-align: left;
    z-index:100;
    grid-row: 1/2;
    grid-column: 1/2;
    font-style: italic;
    font-family: "Jost";
    //max-width: 30vw;
  padding: 20px;
  margin: 0 auto;
  left: 20vw; 
  top: calc(350px + 6vw);
  color: #ccc;
  //color: #222;
  color: #eee;
  font-size: 30pt;
  top: 490px;
  text-shadow: 2px 2px 0 black;
}

.blurb{
    min-height: 350px;
    background: #ddd;
    padding: 50px;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}
nav{
    position: absolute;
    left: -325px;
    top: 0;
    width: 325px;
    transition: .2s ease-out; 
    background: #0038a7;
    color: white;
    font-weight: 100;
    z-index: 101;
    font-family: "Helvetica" ,"Arial", "Roboto";
    min-height: 100vh;
}
#main-menu{
    padding: 100px 0px 100px 0;
}
.main-menu-item{
    font-size: 24pt;
    padding: 20px 0px 20px 50px;

}
.main-menu-item:hover{
    background: #0066cc;
}
#main-menu-close{
    font-size: 30pt;
    font-weight: 100;
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    height: 60px;
    padding: 0px 10px;
    border-radius: 4px;
}
#main-menu-open{
    padding: 10px;
    position: absolute;
    border: 2px solid #ccc;
    left: 50px;
    top: 20px;
    background: #444;
    border-radius: 4px;
    z-index: 100;
}
.hamburger{
    height: 4px;
    width: 40px;
    background: #ccc;
    margin: 5px 0;
    border-radius: 2px;
}
#main-menu-open:hover{
    background: #0066cc;
}
#main-menu-close:hover{
    background: #0066cc;
}
#page-block{
    height: 100vh;
    width: 100vw;
    display: none;
    position: fixed;
    background: #0008;
    left: 0;
    top: 0;
    z-index: 98;
    //background: linear-gradient(-45deg, #1119, #3339);
    //background: linear-gradient(45deg, #9999, #aaa9);
}
footer{
    background: #333;
    color: #aaa;
    min-height: 400px;
    text-align: center;
}
#triangle {
    height: 150px;
    width: 100%;
    background: linear-gradient(to top right, transparent 0%, transparent 50%, #4b72acaa 50%, #2b5fadff 100%);
    position: absolute;
}
.blurb-title{
    font-size: 40pt;
    text-align: center;
    z-index:100;
    grid-row: 1/2;
    grid-column: 1/2;
    margin-top:70px;
    font-style: italic;
    font-family: "Jost";
}
.blurb-text{
    font-size: 18pt;
    text-align: center;
    z-index:100;
    grid-row: 1/2;
    grid-column: 1/2;
    font-style: italic;
    font-family: "Jost";
    max-width: 700px;
  margin: 0 auto;
    margin-top:160px;
    margin-bottom:20px;
}
footer section{
    display: grid;
    grid-template-columns: 2fr 1fr;
  width: 95vw;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
  padding-top: 20px;
}
#links a{
    color: #aaa;
    text-decoration: none;
}
#links a p{
    padding-bottom: 4px;
}
#links a:hover{
    color: #ccc;
}
#bottomMark{
    width: 40%;
    opacity: .5;
    border-bottom: 1px solid #bbb;
    margin-bottom: 20px;
}
#contact{
    text-align: center;
}
#contact p{
    padding-bottom: 4px;
}
.links-title{
  font-weight: 600;
  padding-bottom: 10px;
}


@media (min-width: 1200px){
    
    #tiles{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 1000px;
    }
}

@media (max-width: 1100px){
    
    main{
        height: 1560px;
    }
    #tiles{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        height: 1600px;
    }
    #tiles .tile:nth-of-type(3){
        grid-column: 1/2;
        grid-row: 3/4;
    }
    #hero{
        background-position-x: -390px;
    }
  header{
    right: 30px;
  }
  .hero-overlay{
    display: none;
  }
}
@media (max-width: 750px){
    
    main{
        height: 3360px;
    }
    #tiles{
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        height: 3400px;
        background-position-x: calc(50% - 400px);
    }
    #hero{
        background-position-x: -730px;
    }
  header{
    right: 10px;
  }
  #signature{
    width: 50vw;
  }
  .hero-overlay{
    display: none;
  }
  footer{
    font-size: 9pt;
  }
}
@media (max-width: 500px){
    #hero{
        background-position-x: -900px;
    }
}