*  {box-sizing: border-box;}

html  { height: 100%;}


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


.hero    {background-image: url("contactheroimage1800wide.jpg");
          /*height: 50%;*/
          background-position: center;
          background-repeat:no-repeat;
          background-size: cover;
          border: dotted 1px green;
          padding: 0;
          min-height: 328px;
}


.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;
}


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



li        {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;
}

h1 {color: #f0c330;
    /*position: relative;*/
    margin-left:20px;
}

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

.heading { 
          width:98%;
          background-color:#757575;
          height:max-content;
          margin: 0 auto;
          padding-top:10px;
          padding-left: 0%;
          padding-right: 4%;
          padding-bottom: 10px;
          border-radius: 10px;
          margin-left: 1%;
          margin-right: 1%;
}


.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;
     display: block;
     border-radius: 10px;
 
}

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

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

span {color: #f0c330;}

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

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


@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;
}
  
  .prepper      {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: 10px;
                 width: max-content;
}
  
  .prepper      {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:30px;
                 margin-top: 10px;
                 width: max-content;
}
  
  .prepper      {color: #C6930A;
                 font-size: 1.7em;
                 /* position: relative;
                 left: 30px;
                 bottom: 20px; */
                 font-weight: bold;
                 margin:0;
                 margin-left: 30px;
                 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;
}
  
  .prepper        {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;
}
    
 .prepper         {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;
}
  

 .prepper         {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;
                   
 }
  
 .prepper         {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;
                }
}