html {
			    width:100%;
			    overflow-x: hidden;
		}

		body {
			    margin:0;
			    padding: 0;
		}

        a {
        	font-family: Gabriola;
        	text-decoration: none;
        	font-size: 24px;
        	color: black;
        	padding: 20px 20px 0 20px;
        }

       a:hover {
           text-decoration: underline;
       }
       
       .current {
           text-decoration: underline;
       }
       
        h2 {
        	 font-family: Gabriola;
        	 font-size:31px;
        }

		#head-wrapper {
						border-bottom: 2px solid grey;
						background-color: #AFEAC3;
						width: 100%;
						z-index: 5;
		}

		#head-wrapper h1 {
                             font-family: tahoma;
                             display: inline-block;
                             padding: 0 0 0 0;
                             margin-left: 45px;
                             position:relative;
                             top:-15px;
		}

		#logo-image {
			           margin-left:20px;
			           margin-top:25px;
			           height:50px;
			           width:50px;
			           image-rendering:-webkit-optimize-contrast;
		}

    #menu {
           display: none;
    }

        #navigation-bar {
                           position: absolute;
                           right: 30px;
                           top:30px;
                           display: inline-block;
        }

        #navigation-bar li {
        	 display: inline-block;
        	 margin-top: -20px;
        }
 
        /* hero image and background */
        #hero-section {
                    	background-image: url("lip.png");
        	        	padding-top:50px;
        	            padding-bottom: 80px;
        }

        #hero-image {        	         
        	           /* Use display block to center an image */
        	           display: block;
        	           width:80%;
        	           margin: auto;
        	           image-rendering:-webkit-optimize-contrast;
        	           width:82%;
        }


        #hero-section .tagline {
                    font-family: arial;       
                	font-size: 36px;
                	font-weight: 100;
                	padding-bottom: 1px;
                	position: absolute;
                	top:162px;
                	right:25%;
                	left:25%;
                	color: white;
                	text-align: center;
                	background-color: rgba(0,0,0,0.8);
        }

        /* ---- services section ---- */
        #services-wrapper {
                             background-color: pink;
                             padding-bottom: 80px;
						     padding-top: 40px;
        }

        #card {
        	    width:78%;
        	    background-color: white;
        	    text-align: center;
        	    margin: auto;
        	    padding: 25px 25px 25px 25px;
        	    align-items: stretch;
        }



        #card h1 {
        	        text-align: center;
        	        font-family: Gabriola;
        	        font-size: 37px;
        	        margin-top: 0px;
        }

        #card p {
                    font-family: arial;       
                	font-size: 18px;
                	font-weight: 100;
                	padding-bottom: 1px;
        }        
        


        #cont1,#cont2,#cont3,#cont4 {
			    border:1px solid grey;
			    width:39%;
			    display: inline-block;
			    vertical-align: top;
			    height:100%;
			    padding-left:20px;
			    padding-right: 20px;
		}

        
		#cont1,#cont2 {
			height:450px;
			margin-top: -10px;

		}

		.animateUp {
					    animation-name: fadeInUp;
		                animation-duration: 2s;
		}

		#cont3,#cont4 {
			height:400px;
			margin-top: 40px;
		}
        
        .animateUp2 {
        	           animation-name: fadeInUp2;
        	           animation-duration: 3s;
        }

        #cont1,#cont3 {
        	       margin-right: 20px;
        }

        #cont2,#cont4 {
        	      margin-left: 20px; 
        }

       /*  --- photos ----*/

       #section2 {
                     text-align: center;
                     padding:70px 0 80px 0;
                     background-image: url("lip.png");
                     border: 1px solid transparent;
        }

        #image1,#image2,#image3,#image4 {
                        image-rendering:-webkit-optimize-contrast;		
        }

       #image1 {
       	           width:360px; 
       	           height:270px;
       	           margin-right:5%;
                   border: 1px solid transparent;
       }
       
       #image2 {
                  width:360px;
                  height:270px;
                  border: 1px solid transparent;
       }

       #image3 {
                  width:360px;
                  height:270px;
                  margin-left:5%;
                  border: 1px solid transparent;
       }

       #image4 {
       	           display: none;
       }

       /* --- footer --- */
        footer {
        	     background-color: grey;
        	     text-align: center;
        	     position:absoulte;
        	     bottom:5px;
        	 }
        #f1 {
        	height: 100%;
        	padding-top: 4px;
        	padding-bottom:4px;
        }

        #f1 p {
               font-family:times new roman;
               font-size:17px;
        }


        @media screen and (max-width: 1260px) {
              #hero-section .tagline {
                                      font-size: 28px;
             }

        }	

        @media screen and (max-width: 1218px) {
        	
        	#image4 {
        		display:inline;
        		width: 360px;
        		height:270px;
        		margin-top: 30px;
        		position: relative;
        		left:5%;        		
        	}

        	#image3 {
        	    margin-top:30px;
        	    margin-left: -5%
        	}
            
        	#section2 {
        		         width:90%;
        		         margin:auto;
        	}

        }

        @media screen and (max-width: 983px) {
                                     #hero-section .tagline {
                                      font-size: 24px;
             }
        }

        @media screen and (max-width: 858px) {
        	#image1,#image2,#image3,#image4 {
        		width:280px;
        	}
          
            #hero-section .tagline {
                                      font-size: 20px;
             }

        }
     
        @media screen and (max-width: 765px) {
        	        #cont1,#cont2,#cont3,#cont4 {
        	        width:400px;
        	        margin: auto;
        	        height:auto;
        	        padding-bottom: 85px;
        }

        #image1,#image2,#image3,#image4 {
                     width:350px;   
                     margin: auto;
                     margin-top:20px;
        }
       
        #image4 {
        	position: relative;
        	left: 0;
        	margin-bottom:30px;
        }
        
        #cont2,#cont3,#cont4 {
            margin-top:30px;
        }
}
        @media screen and (max-width: 575px){
        	#hero-image {
        		width:100%;
        	}

        	        #hero-section {
        	        	padding-top:50px;
        	            padding-bottom: 0px;
        }

        #services-wrapper {
                             background-color: pink;
                             padding-bottom:0px;
						     padding-top: 0px;
        }

               #section2 {
                     text-align: center;
                     padding:0px 0 0px 0;
        }
   
        #image1,#image2,#image3,#image4 {
                     width: 100%;
        }

        .tagline {
        	          width:95%;
        	          text-align: left;

        }

        #hero-section .tagline {
                                      font-size: 18px;
                                      margin-top: -25px;
                                      text-align: left;
                                      left:10px;
                                      margin-top:20px;
             }  

        #cont1,#cont2,#cont3,#cont4 {
             width: 70%;
        }
        }

        @media screen and (max-width: 424px){
           #menu img { width:80px;height: 80px;margin-top: 20px; }
           #responsive-nav li a { font-size: 20px; }
        }

        @media screen and (max-width: 390px){
            #menu img { position: absolute;right:5px;}
            #responsive-nav li a { display:inline-block ;font-size: 17px; }          
        }
        
         @media screen and (max-width: 340px){
          #responsive-nav li a { display:inline-block ;font-size: 15px; }
         }
         
        @keyframes fadeInUp {
        from {
         opacity: 0;
         margin-top:180px;
          }

        to {
          margin-top:-10px;
          opacity: 1;
          }
        }

        @keyframes fadeInUp2 {
        from {
         opacity: 0;
         margin-top:180px;
          }

        to {
          margin-top:40px;
          opacity: 1;
          }
        }
        
        @keyframes slideInRight {
        from {
               transform: translate3d(-700px,0,0);
               visibility: visible;
        }

        to {
                transform: translate3d(0px,0,0);
        }

        }

        @keyframes slideInLeft {
        from {
               transform: translate3d(1200px,0,0);
               visibility: visible;
        }

        to {
                transform: translate3d(0px,0,0);
        }

        }

        @keyframes slideInRightTag {
        from {
               transform: translate3d(-1000px,0,0);
               visibility: visible;
        }

        to {
                transform: translate3d(0px,0,0);
        }

        }
        
        @keyframes rotateIn {
        from {
               transform-origin: center;
               transform: rotate3d(0, 0, 1, -200deg);
               opacity: 0;
        }

		to {
		    transform-origin: center;
		    transform: none;
		    opacity: 1;
		  }

		}
        
        @media screen and (min-width:900px) {
        .fadeInUp {
                     animation-name: fadeInUp;
        }

        .fadeInUp2 {
                     animation-name: fadeInUp2;
        } 

        .slideInRight {
        animation-name: slideInRight;
        transition-delay: 3s;
        animation-duration: 2s;
     
        }

        .slideInLeft {
        animation-name: slideInLeft;
        transition-delay: 3s;
        animation-duration: 2s;
        
        }

		.rotateIn {
		  animation-name: rotateIn;
		  animation-duration: 2s;
		  animation-timing-function: ease-out;
		}

        }

            .slideInRightTag {
        animation-name: slideInRightTag;
        animation-duration: 3s;
        animation-timing-function: ease-out;
        }

    #responsive-nav {
           display: none;
    }

    @media screen and (max-width: 900px){

    #navigation-bar {
      display:none;
    }

    #menu  {
                        display:block;
                        float:right;
                        margin-right: 25px;
                        margin-top:-12px;
               }

        #responsive-nav {
      position: absolute;
      right:5px;
    }

    #responsive-nav li {
        list-style: none;
        display: inline-block;
    }
     
    }