@charset "UTF-8";
/* CSS Document */

  html{ 
  	  height: 100%;
	  width: 100%;
}
		
		
        body {
            background-image: url("light_textured_backround.jpg");/*http://www.momorialcards.com/texturebackgrounds.html is where I found the background*/
			background-size: 100%;
			
	    }
		
		
		
		header {
			width: 96%;
            margin: 2%;
			clear: both;
		}
		
		header #logo {
			width: 600px;
			height: auto;
			float: left;
			margin: auto;
		}
		
		header img {
            float: left;
            width: 50%;
        }
		
        header nav {
            float: right;
            width: 50%;
			float: right;
			clear: right;
        }
		
		

		header nav ul li{
    	list-style: none;
    	display: block;
    	float: left;
    	margin: 20px;
		}

		header nav ul li a{
   		text-decoration: none;  
    	font-family: 'Open Sans', sans-serif;
    	font-size: 20px;
		color: black;
		}
		
		a {
			text-decoration: none;
		}
		
		header nav ul li a:hover{
    	color: #B9B9B9;
		}
		
		header div h1 {
			font-family: 'Open Sans', sans-serif;
			font-size: 50px;
			color: brown;
			float: right;
			clear: both;
			margin-top: -25px;
		}
		 /*Breadcrumbs*/
		#breadcrumbs {
			float: left;
			font-family: 'Open Sans', sans-serif;
			font-size: 15px;
			}
			
		#breadcrumbs a {
			text-decoration: none;
			color: brown;
			}
			
		#breadcrumbs a:hover {
			color: #B9B9B9;
			}
		
		/*Columns and Photos*/
        #container {
            width:96%;
            margin: 2%;
			
		}
		
        .column{
            float:left;
            width:21%;
			height: auto;
			margin: 2%
		}
		
		.column img {
            margin: 2%;
			width: 96%;
			height: auto;
			display: block;
			align-content: center;
			-webkit-transition: margin .5s ease;
     		-moz-transition: margin .5s ease;
       		-o-transition: margin .5s ease;
      		-ms-transition: margin .5s ease;
            transition: margin .5s ease;
	
}
       
	   .column img:hover {
		   margin-top: -50px;
		   
	   }
		 
        
		
        .column h3 {
			font-size: 20px;
			text-align:center;
			font-family: 'Open Sans', sans-serif;
			color: black;
			margin-top: -5px;
			}
		
        .column p {
			text-align: center;
			font-family: 'Open Sans', sans-serif;
			color: brown;
			font-size: 20px;
			width: 96%;
			margin: 2%;
			height: auto;
			background-color: rgba(255,255,200,0.5);
        }
		
        h1 {
			text-align:center;
			font-family: 'Open Sans', sans-serif;
			font-size: 50px;
			display:none;
			
		}
		
	    h2 {
			text-align: left;
			font-family: 'Open Sans', sans-serif;
			font-size: 30px;
			
		}
		
		p {
            text-align: left;
			font-family: 'Open Sans', sans-serif;
			display:none;
		}
		
		
		
		.clear {
			clear: both;
		}
		
		
 #footer {
            clear:both;
            text-align:center;
			font-family: 'Open Sans', sans-serif;
			
        }
		

        @media screen and (max-width: 960px) {
            header img {
                width: 40%;
            }
            header nav {
                width: 60%;
            }
        }

        /*Tablets*/
        @media screen and (max-width: 758px) {
            header img {
                float: none;
                width: 100%;
            }
            header nav {
                float: none;
                width: 100%;
            }
        }

        /*Phones*/
        @media screen and (max-width: 524px){


        }