header{
    background-color: white;
    border-bottom: solid 2px #cccccc;
}


#Name{
    display: inline-block;
    padding: 10px 10px;
    background-color: #4aaaa5;
    color: white;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 0px;
    position: relative;
    animation-name: aniname;
    animation-duration: 3s;
    
}

@keyframes aniname{
    from {color:#4aaaa5}
    to {color:white;}
}

ul{ 
    list-style-type: none;
    float:right;
    position: relative;
    margin-bottom: 16.5px;}
li{
    display:inline;
    padding: 0px 5px;
    text-align: center;
  
}

.brdr {
    border-right: solid;
    border-width: 2px;
    border-color: gray;
}
body{
    margin:0;
    margin-bottom: 100px;
    background-color: #dddddd;
    /* min-width: 1200px; */

}

h1{
    color:#4aaaa5;
    }

h1, h2, h3, h6{
        font-family: Georgia, Times, Times New Roman, serif;
     }
    
 h6{
    color:#777777;
    text-align: center;
     }
    
.header1{
        position:relative;
        left: 15px;
        top: 10px;
        padding: 10px 0px;
    }


.wrapper1, .wrapper{
        background-color: #ffffff;
        width: 960px;
        margin:  auto;

}

.wrapper{
    padding-bottom: 10px;
}

.wrapper2{
    border-top: solid 2px #cccccc;
    width: 930px;
    
    
    margin: auto;
    overflow-y: auto;
    padding-bottom: 10px;
   
   }

img{
    padding-top: 15px;
    float:left;
    padding-right: 15px;
   
     }
p, a {
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
     color: gray;
     text-decoration: none;
     line-height: 2em;
     text-indent: 35px;
    
 }

 
 .footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%; 
    background-color:#666666;
    border-top: solid 8px #4aaaa5;
    margin-top: 10px;
    text-align:center;
    
 }

 a:hover{
     border:solid 1px gray; 
     background-color: gray;
     color: white;
 }

 /* Portfolio */

.gallery1 , .gallery2 , .gallery3 , .gallery4, .gallery5{
    box-sizing: border-box;
    position: relative;
      
}
  


 #pic2{
    background-color:  #4aaaa5;;
    text-align: center;
    position: absolute;
    top: 115px;
    left: 324px;
    padding: 15px 110px;
    color: white;

}

#pic1{
   background-color:  #4aaaa5;;
    text-align: center;
    position: absolute;
    top: 115px;
   /* top: 297px; */
   /* left: 210px; */
    padding: 15px 135px;
    color:white;
}
#pic3{
   background-color:  #4aaaa5;;
   text-align: center;
   position: absolute;
   top: 279px;
   /* left: 210px; */
   padding: 15px 133.5px;  
   color:white;
}

#pic4{
   background-color:  #4aaaa5;;
   text-align: center;
   position: absolute;
   top: 279px;
   /* top: 463px; */
   left: 324px;
   padding: 15px 120.5px;  
   color:white;
}

#pic5{
   background-color:  #4aaaa5;;
    text-align: center;
    position: absolute;
    top: 444px;
   /* top: 627px; */
   /* left: 210px; */
    padding: 15px 137.5px;
    color:white;
}

 /* Contact */

 input[type=text] {
   
    margin: 10px auto;
    width: 99.5%;
}
input[type=submit]{
    background-color: #4aaaa5;
    padding: 15px 32px;
    color: white;
}

textarea{
    margin: 10px auto;
    width:99.1%;
    height: 150px;
}

/* Responsive 980 */
@media only screen  and (max-width: 980px){

    *{
        box-sizing: border-box;
        
    }
    .wrapper1{
        width: 100%;
    }   
    
    .wrapper{
        width: 690px;
        margin-left: 20px;
    }
    
    
    .wrapper2{
        width: 660px;
       margin: auto;
       /* overflow-y: visible; */
    }
    #Name{
       
        margin: 0px 0 0 20px;
        
    }
            
    ul{
        float: right;
        top: 50%;
        margin-right: 5px;
       
       
    }
    
    img{
        float: left;
        display: block;
        /* margin-left: auto; */
        /* margin-right: auto; */
        width: 250px;
             
        
    }
    
    p{
        font-size:12px;
        text-indent: 0;
    }
    #Pic1, #Pic2, #Pic3, #Pic4, #Pic5{
        width: 50%;
        
        /* float:left; */
        
        }
    #Pic2, #Pic4{
        
        margin-right: 0px;
        padding-right: 0px;
            
       
    }


    
    #pic1{
        top: 100px;
      
        padding: 15px 138px;
    }
    
    #pic2{
        top: 100px;
        left: 330px;
        padding: 15px 119.8px;
        
    
    }
    
    #pic3{
       top: 249px;
       padding: 15px 136px;  
    
    }
    
    #pic4{
       top: 249px;
       /* right: 300px; */
       padding: 15px 130px;  
       left: 330px;
    }
    
    #pic5{
        top: 400px;
        padding: 15px 140.5px;
      }
    
} 
          




/* Responsive 768 */
@media only screen  and (max-width: 768px){
    *{
        box-sizing: border-box;
        
    }
    .wrapper1{
        width: 100%;
    }   
    
    .wrapper{
        width: 708px;
        /* margin-left: 10px;
        margin-right: 10px; */
        /* margin: auto; */
    }
    
    
    .wrapper2{
        width: 678px;
       margin: auto;
       /* overflow-y: visible; */
    }
    #Name{
       
        margin: 0px 0 0 10px;
        
    }
            
    ul{
        float: right;
        top: 50%;
        margin-right: 5px;
       
       
    }
    
    img{
        float: left;
        display: block;
        /* margin-left: auto; */
        /* margin-right: auto; */
        width: 250px;
             
        
    }
    
    p{
        font-size:12px;
        text-indent: 0;
    }
    #Pic1, #Pic2, #Pic3, #Pic4, #Pic5{
        width: 50%;
        
        /* float:left; */
        
        }
    #Pic2, #Pic4{
        
        margin-right: 0px;
        padding-right: 0px;
            
       
    }


    
    #pic1{
        top: 100px;
      
        padding: 15px 142.5px;
    }
    
    #pic2{
        top: 100px;
        
        left:  339px;
        padding: 15px ;
        padding-left:124px;
        padding-right: 124.5px;
        
    
    }
    
    #pic3{
       top: 250px;
       padding: 15px 140.5px;  
       left: 0px;
    
    }
    
    #pic4{
       top: 250px;
       padding: 15px 134.5px;  
       left: 339px;
    }
    
    #pic5{
        top: 400px;
        padding: 15px 145px;
      }
    
        

/* Responsive 640 */

@media only screen and (max-width: 640px){
*{
    box-sizing: border-box;
    
}

.wrapper1{
    width: 100%;
}

.wrapper{
    width: 590px;
 
    margin-left: 10px;
    margin-right: 10px;
    
}

.wrapper2{
    width: 560px;
   
    margin: auto;
    overflow-y: visible;
}
#Name{
    /* display:block; */
    margin-top: 0px;
    margin-left:0px;
    width:100%;
    text-align: center;
}
        
ul{
    float: none;
    width: 100%;
    text-align: center;
    top: 03px;
    margin: 5px auto; 
}

textarea{
    height: 100px;
}

input[type=submit]{
    padding: 10px 27px;
    
}


img{
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 350px;
    padding-right: 0px;
    
    
    
}

p{
    font-size:13px;
    text-indent: 0;
}
#Pic1, #Pic2, #Pic3, #Pic4, #Pic5{
    width: 100%;
    height: 100%;
    float: none;
    padding-right: 0px;
    
}


#pic1{
    top: 210px;
    font-size: 20px;
    padding: 25px 135px;
    width: 100%;
    height: 75px;
}

#pic2{
    top: 210px;
    left: 0px;
    width: 100%;
    padding: 25px 110px;
    height: 75px;
    font-size: 20px;
    

}

#pic3{
   top: 210px;
   width: 100%;
   padding: 25px 133.5px; 
   height: 75px;
   font-size: 20px; 

}

#pic4{
   top: 210px;
   padding: 25px 120.5px;  
   width: 100%;
   left: 0px;
   height: 75px;
   font-size: 20px;
}

#pic5{
    top: 210px;
    width: 100%;
    padding: 25px 137.5px;
    height: 75px;
    font-size: 20px;
  }


}