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

/*In the body set bg-image or bg-color NEVER, set width & height*/

body{
	margin:0;
	padding:0;
    background-image: url(images/background.jpg);
    background-repeat: round;
	}

h1{font-family: 'Satisfy', cursive;
    text-align: center;
    color:#796752}

nav{ 
    text-align: center;
    width:100%;
    height: 30px;
    padding: 25px;
    background-image: url(images/nav.png);
    background-repeat: no-repeat; } 

nav a{color:#F1E5D5;
        padding: 50px;
    margin:auto;
    text-align: center;
    text-decoration: none;
    font-family: 'Satisfy', cursive;
    font-size: 25px
    }
nav a:hover{ background-image: url(images/bone.png); background-repeat: no-repeat; background-position: center left;}

.container {width:960px;
            
            margin:auto;}

.top {width: 960px;
        height: 60px;
        padding-left: 20px;
        background-image:url(images/topbar.png);
        background-repeat: no-repeat;
    margin-top: 60px;}
.contact a{color:#F1E5D5; }
.contact a:hover{opacity: .5}

.contact { text-align: center;
        width:240px;
        padding:2px;
        margin:-8px;
        color:#F1E5D5;
            height: 60px;
            float: left;
    font-family: 'Open Sans', sans-serif;}
.contact a {color:#F1E5D5;
            text-decoration: none;
            text-decoration: underline;
            }
.contact a:hover{opacity: .5}

.social {text-align: center;
    width:275px;
    height: 48px;
    padding-right: 15px;
    padding: 4px;
    float:right;
    margin:auto;
    text-decoration: none;}
.social img:hover{opacity: .5;}

.logo {text-align: center; 
    margin:auto; 
    width:388px;
    height:309px;
    margin-top: -58px;}

.hero {text-align: center;
        padding: 25px;}

.copy { text-align: left;
    width:701px;
        height:300px;
    margin:auto; 
    color:#796752;
    font-family: 'Open Sans', sans-serif;
    margin-top: 40px;} 

.footer {text-align: center;
        margin: auto; 
        width: 960px;
        height: 235px;
        background-image:url(images/footer-image.png);
        background-repeat: no-repeat;
        color:#F1E5D5;
        font-family: 'Open Sans', sans-serif;
clear:both;}
footer a{color:#F1E5D5; }
footer a:hover{opacity: .5}


.address {text-align: center;
            float:left;
            margin: auto;
            padding: 20px;
            margin-top: 50px;
            margin-left: 25px;
            width:240px;
            height:100px;
        }
.contactinfo {text-align: center;
            float:right;
            margin: auto;
            padding: 20px;
            margin-top: 50px;
            margin-right: 25px;
            width:240px;
            height:100px;}

        /*VOLUNTEER CSS*/

.volunteercopy
{text-align: left;
    width:701px;
        height:auto;
    margin:auto; 
    color:#796752;
    font-family: 'Open Sans', sans-serif;
    margin-top: 40px;}

.volunteerwhy
{width: 350.5px;
 margin: auto;
    color:#796752;
   font-family: 'Open Sans', sans-serif; }

.volunteerleft 
{width: 350.5px;
 float: left;
 color:#796752;
 text-align: left;
 margin:auto;
padding-left: 100px;
 font-family: 'Open Sans', sans-serif;}

.volunteerright 
{width: 350.5px;
 float: right;
 text-align: left;
 color:#796752;
margin: auto;
padding-right: 100px;
 font-family: 'Open Sans', sans-serif;}

.volunteerapp {width: 449px;
                height: 124px;
            text-align: center;
            margin: auto;
            padding:20px;}
.volunteerapp img:hover{opacity: .5;}

.volunteerfooter {text-align: center;
        margin: auto; 
        width: 960px;
        height: 235px;
        background-image:url(images/footer-image.png);
        background-repeat: no-repeat;
        color:#F1E5D5;
        font-family: 'Open Sans', sans-serif;}
.volunteerfooter a{color:#F1E5D5; }
.volunteerfooter a:hover{ opacity: .5}



h2{color:#796752;
    font-family: 'Satisfy', cursive;
    text-align: center}

/*ABOUT CSS*/

.three {width: 995px;
     height: 200px;
    margin:auto;
    text-align: center;}

.column {width: 321.33px;
        height: 250px;
        text-align: center;
         box-sizing: border-box;
        text-align: center;
        padding:3%;
        float:left;}


.aboutleft 
{width: 350.5px;
 float: left;
 color:#796752;
 text-align: left;
 margin:auto;
padding-left: 100px;
 font-family: 'Open Sans', sans-serif;}

.aboutright 
{width: 350.5px;
 float: right;
 text-align: left;;
 color:#796752;
margin: auto;
padding-right: 100px;
 font-family: 'Open Sans', sans-serif;}

.aboutfooter {text-align: center;
        margin: auto; 
        width: 960px;
        height: 235px;
        background-image:url(images/footer-image.png);
        background-repeat: no-repeat;
        color:#F1E5D5;
        font-family: 'Open Sans', sans-serif;}
.aboutfooter a{color:#F1E5D5; }
.aboutfooter a:hover{ opacity: .5}

/*FAQ CSS*/

.faqcopy {text-align: left;
    width:701px;
        height:100pzpx;
    margin:auto; 
    color:#796752;
    font-family: 'Open Sans', sans-serif;
    margin-top: 10px;}
}
/*IDs need a # ........ Classes need a .*/