@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; }


html { 
  background: url(img/Parchment_Paper2.jpg) no-repeat center center fixed;
   
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


body {
  border: 0px;
  a img border: none;
  font-family:"Century Gothic";
  
  padding-top:inherit;

  
}

#container {
font-family:"Century Gothic";
  width: 100%;
  height: 80%;
  overflow: hidden;
  padding: 0;  
    
}

header {
	width: 100%;
	
	
}

#logo {
	margin-left:50px;
	margin-top: 75px;
	float: left;
	width: 200px;
	
	
	}

#nav {
	margin-top:40px;
	margin-left: 52px;
	height: 50px;
	width:642px;
	
	
	
}

#nav2 {
	font-size:22px;
	color: #000;
	height: 140px;
	
	
	
	
}

#nav2 ul {

list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#nav2 li
{
float:left;

}

#nav2 li a:link, a:visited {
display:block;
width:170px;
height: 140px;


color: #000;
text-align:center;
text-decoration:none;
		
	
}

#nav2 li a:hover, #nav li.active a {
  
  cursor: pointer;
  text-decoration: none;
  font-weight:bold;
  
  color:#000;
}

#menu {
	font-size:22px;
	color: #a4a4a4;
	width: 270px;
	height: 100%;
	margin-left: 25px;
	margin-top: 20px;
	list-style-type:none;
	
}

#menu ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#menu li
{
float:left;

}

#menu li a:link, a:visited {
display:block;
width:230px;
height: 74px;
	
	color: #000;
	text-align:center;
	text-padding: 25px;
	text-decoration:none;
	vertical-align:central;	
	
}

#menu li a:hover, #menu li.active a {
  
  cursor: pointer;
  text-decoration: none;
 
  font-weight:bold;
  color:#000;
}


#content{
	width:598px;
	min-height:350px;
	text-align:justify;
	margin-left: 51px;
	margin-top: 46px;
	font-size:14px;
			
}

#content h1 {
	font-size:16px;
	font-weight:bold;
}

#content a:link, a:visited {
	color:#000;
	text-decoration:underline;
	}

#content a:hover {
	color:#000;
	text-decoration:underline;
}


#footer {
	font-size:12px;
	margin-left: 479px;
	
	}


/*photobanner*/
 
.photobanner {
    height: 233px;
    width: 4970px;
	margin-top: 180px;
    
}

.photobanner img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

/*keyframe animations*/
.first {
    -webkit-animation: bannermove 50s linear infinite;
       -moz-animation: bannermove 50s linear infinite;
        -ms-animation: bannermove 50s linear infinite;
         -o-animation: bannermove 50s linear infinite;
            animation: bannermove 50s linear infinite;
}
 
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -3500px;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3500px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3500px;
 }
 
}
 
@-ms-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3500px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -3500px;
 }
}
 

/* Media queries */
@media screen and (max-width: 1200px) {
    body{
    width:100%;
	height:100%;
    margin:0 auto;
    }
	header {
	width: 100%;
	
}

#logo {
	width: 25%;
	
	}
    #content {
    width: 71%;
    }
   
}
 
@media screen and (max-width: 980px) {
body{
    width:100%;
	height:100%;
    margin:0 auto;
    }
	header {
	width: 100%;
	
}

#logo {
	width: 25%;
	
	}
    #content {
    width: 71%;
    }
   
}
 
@media screen and (max-width: 750px) {
    body{
    width:100%;
	height:100%;
    margin:0 auto;
    }
	header {
	width: 100%;
	
}

#logo {
	width: 25%;
	
	}
    #content {
    width: 71%;
    }
	
    
}
 
@media screen and (max-width: 540px) {
    body{
    width:100%;
	height:100%;
    margin:0 auto;
    }
	header {
	width: 100%;
	
}

#logo {
	width: 25%;
	
	}
    #content {
    width: 71%;
    }
   
   
}
 
@media screen and (max-width: 380px) {
    body{
    width:100%;
	height:100%;
    margin:0 auto;
    }
	header {
	width: 100%;
	
}

#logo {
	width: 25%;
	
	}
    #content {
    width: 71%;
    }
    
    
}