body {

    background-color: #FFFFFF;
    margin: 0%;
  }

  @font-face {
    font-family:"Neue Haas Grotesk";
    src: url(NeueHaasDisplay-Mediu.ttf);
  }

  ul {
    background-color: #ffffff;
    list-style-type:none;
    margin: 0;
    padding: 10px;
    overflow:hidden;
    background-color: #ffffff;
    text-align: center;
    font-size: 20px;
  }

  li a {
    display:flex;
    color:#ff0000;
    text-align: center;
    padding: 14px 50px;
    text-decoration:none;
    font-family: "Neue Haas Grotesk";

  }

  li a:hover {
    background-color: #ffffff;
    color: black;
  }

  li {
    display:inline-flex;
    color: #ffffff;
  }

  h1 {
    font-family:"Neue Haas Grotesk";
    color: #000000;
    text-align: left;
    padding-left: 215px;
    padding-top: 100px;
    font-size: 35px;
   letter-spacing: -1px;
  }


  h2 {
    font-family:"Neue Haas Grotesk";
    color: #ffffff;
    text-align: left;
    padding-left: 215px;
    padding-top: 100px;
    font-size: 35px;
   letter-spacing: -1px;
  }

  h3 {
    font-family:Helvetica;
    color: #ffffff;
    text-align: center;
    padding-left: 0px;
    padding-top: 400px;
    font-size: 30px;
    font-weight: 400;
    font-style: italic;
   letter-spacing: -2px;
  }

  #one {
    font-family:Helvetica;
    color: #000000;
    text-align: left;
    padding-left: 40%;
    padding-right:200px;
    padding-top:100px;
    padding-bottom: 300px;
    font-size: 22px;
  }


  #two{ 
    font-family:Helvetica;
    color: #ffffff;
    text-align: left;
    padding-left: 40%;
    padding-right:200px;
    padding-top:100px;
    padding-bottom: 0%;
    font-size: 22px;
  }

  #three {
    font-family:Helvetica;
    font-style: italic;
    color: #ff0000;
    text-align: left;
    padding-left: 300px;
    padding-right:300px;
    padding-top:175px;
    padding-bottom: 175px;
    font-size: 22px;
  }

  #four{ 
    font-family:Helvetica;
    color: #ffffff;
    text-align: left;
    padding-left: 50px;
    padding-right:200px;
    font-size: 18px;
  }
a{
    font-family:Helvetica;
    color: #ffffff;
    text-align: left;
    padding-left: 50%;
    padding-right:50%;
    font-size: 16px;
    text-decoration: none;
    

}



  .block-one {
    width: 100%;
height: 900px;
background-color: #000000;
overflow: hidden;
  }

  .block-two {
    width: 100%;
height: 1100px;
background-color: #000000;
overflow: hidden;
  }

  .block-three {
    width: 100%;
height: 1300px;
background-color: #000000;
overflow: hidden;
  }

  .block-four {
    width: 100%;
height: 1100px;
background-color: #000000;
overflow: hidden;
  }

  img { 
    width: 100%;
   height:auto;
   margin: 0%;
   display: inline-flex;
   overflow: hidden;
   padding-top: 0%;
   vertical-align: top
  }

  .legacy-image {
    width: 70%;
    height: auto;
    display:block;
    margin-left: auto;
   margin-right: auto;
   padding-bottom: 100px;
  }

  footer {
background-color: #000000;
height: 120px;
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
  }

  details {
    user-select: none;
  }
  
  details>summary span.icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s;
    margin-left: 10px;
  }
  
  details[open] summary span.icon {
    transform: rotate(180deg);
  }
  
  summary {
    display: flex;
    cursor: pointer;
    color: #FFFFFF;
    font-family: Helvetica;
    text-align: left;
    padding-left: 50px;
    padding-right:200px;
    font-size: 18px;
  }
  
  summary::-webkit-details-marker {
    display: none;
  }

  .fade-in {
	font-size: 100px;
	color: white;
	opacity: 0.00;
	transition: 1s all ease-in-out;
	-moz-transition: 1s all ease-in-out;
	-webkit-transition: 1s all ease-in-out;
}

.fade-in:hover {
	opacity: 1.00;
}

 

  @media (max-width:768px) {

    ul{
        font-size: 12px;
    }

    li a{
        padding: 10px 25px;

    }

h1{
font-size: 20px;
padding-left: 6rem;
}

h2 {
    font-size: 20px;
    padding-left: 6rem;
}

h3 {

    font-size: 16px;
    letter-spacing: 0;
}

#one{
    font-size: 16px;
    padding-right: 6rem;
}
#two{
    font-size: 16px;
    padding-right: 6rem;
}
#three{
    font-size: 16px;
    padding-left: 6rem;
    padding-right: 6rem;
}
#four{
    font-size: 16px;
}

.block-two{
max-height: 850px;
}

.block-three{
    max-height: 1000px;
    }

.block-four{
    max-height: 900px;
    }

    summary{
        font-size: 16px;
    }
}



  

  @media (max-width:425px) {

    h1{
        font-size: 16px;
        padding-left: 3rem;
        letter-spacing: 0;
        }
        
        h2 {
            font-size: 16px;
            padding-left: 3rem;
            letter-spacing: 0;
        }
        
        h3 {
        
            font-size: 16px;
            letter-spacing: 0;
            padding-top: 250px;
        }
        
        #one{
            font-size: 10px;
            padding-right: 3rem;
            padding-bottom: 100px;
        }
        #two{
            font-size: 10px;
            padding-right: 3rem;
            padding-bottom: 0px;
        }
        #three{
            font-size: 10px;
            padding-left: 3rem;
            padding-right: 3rem;
            padding-top: 50px;
            padding-bottom: 50px;
        }
        #four{
            font-size: 10px;
        }

        .block-one{
            max-height: 550px;
            }

        .block-two{
            max-height: 650px;
            }
            
            .block-three{
                max-height: 850px;
                }
            
            .block-four{
                max-height: 700px;
                }
            
                summary{
                    font-size: 10px;
                }

                footer{
                    height: 50px;
                }

                ul{
                    font-size: 8px;
                }
            
                li a{
                    padding: 4px 10px;
            
                }

  }