*  {box-sizing: border-box;}

html  { height: 100%;
        }


body     {width: 100%;
          height: 100%;
          margin: 0 auto;
          background-color: #212121 ;}


.hero    {background-image: url("aboutheroimage1800wide3.jpg");
          min-height:328px;
          background-position: center;
          background-repeat:no-repeat;
          background-size: cover;
          border: dotted 1px red;
          width:100%;
          margin: 0 auto;
}

.navigation  {width: 80%;
              background: #757575 ;
              color: white;
              margin: 0 auto;
              height:max-content;
              padding-bottom: 5px;
              padding-left: 2%;
              padding-right: 2%;
              padding-top: 0;
}

.navlist  {list-style-type: none;
           width: 100%;
           margin: auto;
           position: relative;
           background:#757575 ;
           padding:0;
           text-align:center;
}

.list     {display: block;
           padding-left: 20px;
           font-size: 1.4em;
           width: 98%;
           border-radius: 10px;
           margin-left: 1%;
           margin-right: 1%;
           margin-bottom: 2px;
           background: black;
           padding: 3px;
}


.nav      {text-decoration: none;
           color: #f0c330;
}



.nav:hover{color: white; 
}

.heading {width:100%;
          margin: 0 auto;
          background-color:#757575;
          padding-left: 2%;
          padding-right:2%;
          padding-top:10px;
          margin-top: -20px;}

.wrapper  { width: 80%;
            margin: 0 auto;
            background-color:#757575;
            height: max-content;
            padding-right: 2%;
            padding-left: 2%;
            padding-bottom: 20px;}

.main {   width:98%;
          background-color:black;
          color: white;
          height:max-content;
          margin: 0 auto;
          padding-top:30px;
          padding-left: 2%;
          padding-right: 2%;
          padding-bottom: 30px;
          border-radius: 10px;
          margin-left: 1%;
          margin-right: 1%;  
}

img {width: 90%;
     margin: 0 auto;
     margin-top: 20px;
     display: block;
     border-radius: 10px;
     }

.p1  {width: 90%;
      margin: 15px auto;
      font-size: 1.2em;
}

.p2   {width: 90%;
      margin: 15px auto;
      font-size: 1.2em;
      border-radius: 10px;
      
}



.p3 {   width: 90%;
      margin: 22.5px auto;
      font-size: 1.2em;
  
}


.mainlist { width: 90%;
            margin: 15px auto;
            font-size: 1.1em;}

.heading2  {width:100%;
          margin: 0 auto;
          background-color:#757575;
          padding-left: 2%;
          padding-right:2%;
          padding-top:10px;
          }

.main2 {   width:98%;
          background-color:black;
          color: white;
          height:max-content;
          margin: 0 auto;
          padding-top:30px;
          padding-left: 2%;
          padding-right: 2%;
          padding-bottom: 30px;
          border-radius: 10px;
          margin-left: 1%;
          margin-right: 1%;  
}

.p-copyright  {width: 98%;
               text-align: center;
               margin: 0 auto;}

.div-copyright  { padding-top: 30px;
                 padding-bottom: 20px;}


@media only screen and (max-width: 519px) {
    
   
   
h1              {color: #C6930A;
                 font-size: 38px;
                 /*position: relative;
                 left:30px;
                 top: 10px;  */
                 margin:0;
                 margin-left: 30px;
                 margin-top: 10px;
                 width: max-content;
}
  
  .ren          {color: #C6930A;
                 font-size: 22px;
                 /*position: relative;
                 left: 30px;
                 top:5px;*/
                 font-weight:bold;
                 margin:0;
                 margin-left: 30px;
                 margin-top: 5px;
                 width: max-content;
}
}

@media only screen and (min-width:520px) {
    
  
  
h1              {color: #C6930A;
                 font-size: 40px;
                 /* position: relative;
                 left:30px;
                 top: 10px;  */
                 margin:0;
                 margin-left: 30px;
                 margin-top: 5px;
                 width: max-content;
}
  
  .ren          {color: #C6930A;
                 font-size: 25px;
                 /*position: relative;
                 left: 30px;
                 top: 5px;*/
                 font-weight:bold;
                 margin:0;
                 margin-left: 30px;
                 margin-top: 5px;
                 width: max-content;
}
}

@media only screen and (min-width: 641px) { 
  /* Reduces size of Logo Text*/
  
  
  
h1              {color: #C6930A;
                 font-size: 2.9em;
                 /*position: relative;
                 left:30px;
                 bottom: 10px;*/
                 margin:0;
                 margin-left: 50px;
                 margin-top: 10px;
                 width: max-content;
}
  
  .ren          {color: #C6930A;
                 font-size: 1.7em;
                 /*position: relative;
                 left: 30px;
                 bottom: 20px;*/
                 font-weight: bold;
                 margin:0;
                 margin-left: 50px;
                 margin-bottom: 20px;
                 width: max-content;
}
}

@media only screen and (min-width: 782px){
  /* reduces size of Logo*/
  
   
h1               {color: #C6930A;
                  font-size: 3em;
                  /*position: relative;
                  left:40px;
                  bottom:10px;
                  margin:0;*/
                  margin-left: 40px;
                  margin-top: 10px;
                  width: max-content;
}
  
  .ren           {color: #C6930A;
                  font-size: 1.8em;
                  /*position: relative;
                  left: 40px;
                  bottom: 20px;*/
                  font-weight: bold;
                  margin:0;
                  margin-left: 40px;
                  margin-bottom: 20px;
                  width: max-content;
}
}

 @media only screen and (min-width: 905px) {
  /* reduces size of Logo */
  
    
    
h1               {color: #C6930A;
                  font-size: 3.6em;
                  /*position: relative;
                  left: 40px;
                  bottom: 20px;*/
                  margin:0;
                  margin-left: 40px;
                  margin-top: 20px;
                  width: max-content;
}
    
 .ren            {color: #C6930A;
                  font-size: 1.9em;
                  /*position: relative;
                  left: 40px;
                  bottom: 40px;*/
                  font-weight: bold;
                  margin:0;
                  margin-left: 40px;
                  margin-bottom: 40px;
                  width: max-content;
 }
 }   
  


@media only screen and (min-width: 1048px) {
  /* Changes size of heading */
  
  
  
h1               {color: #C6930A;
                  font-size: 4em;
                  /*position: relative;
                  left:50px;
                  bottom: 10px;*/
                  margin:0;
                  margin-left: 50px;
                  margin-top: 10px;
                  width: max-content;
}
  

 .ren            {color: #C6930A;
                  font-size: 2.1em;
                  /*position: relative;
                  left: 50px;
                  bottom: 40px;*/
                  font-weight: bold;
                  margin:0;
                  margin-left: 50px;
                  margin-bottom: 40px;
                  width: max-content;
  
  }
  }
  
@media only screen and (min-width: 1262px) {
  /* changes size of heading */
  
    
    
 h1               {color: #C6930A;
                   font-size: 5em;
                   /*position: relative;
                   left:50px;
                   bottom: 20px;*/
                   margin:0;
                   margin-left: 50px;
                   margin-top: 20px;
                   width: max-content;
                   /*margin-bottom: 20px;*/
 }
  
 .ren             {color: #C6930A;
                   font-size: 2.2em;
                   /*position: relative;
                   left: 50px;
                   bottom: 2px;*/
                   font-weight: bold;
                   margin:0;
                   margin-left: 50px;
                   margin-bottom: 2px;
                   width: max-content;
                }
}