html   {height: 100%;
}

*      {box-sizing: border-box;
}

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


.hero  { background-image: url("galleryheroimage1800wide.jpg");
         /*height: 50%;*/
         background-position: center;
         background-repeat:no-repeat;
         background-size: cover;
         border: dotted 1px #DEB887;
         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;
}



.nav:hover{color: white; 
}

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



.wrapper {width:80%;
          background-color:#757575;
          height:max-content;
          margin: 0 auto;
          padding-top:0;
          padding-bottom: 40px;
}

.row        {display:flex;
             flex-wrap: wrap;
             height: max-content;
}

.row-item img {width: 100%;
               max-width: 100%;
               border-radius: 10px;
               border: solid 2px black;
               vertical-align: middle;
}



figure {width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
}



figcaption { text-align: center;
             font-weight: bold;
             margin-top: 20px;
             color: #f0c330;
}

.row-item       {flex: 0 1 100%;
                 padding: 1% 1%;
}

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

h3 {margin-bottom: -10px;}

h2 { padding-top: 5px;
     margin-bottom: -5px;}

.p-copyright  { width: max-content;
                margin: 0 auto;}

.div-copyright {padding-top: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;
}
    
      
  
.photographer   {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;
} 
  
.photographer    {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: 3em;
                  /*position: relative;
                  left:40px;
                  bottom:10px;*/
                  margin:0;
                  margin-left:40px;
                  margin-top:10px;
                  width: max-content;
}   
  
  
.photographer    {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: 732px) {
  
   /*grid changes to 2*/
  
.row-item       {  flex: 0 1 50%;
}
  
  
  img:hover  {transform: scale(1.5,1.5);}
}

@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;
}
    
.photographer    {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;
}
    
    
    
.photographer    {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: 997px) {
  /* grid changes to 3 */
 
  
  
.row-item       {flex: 0 1 calc(100%/3);
}
  
  
img:hover  {transform: scale(1.5,1.5);}
}

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