/* CSS */

html, body {
	width:100%;
	height:100%;
	margin:0 auto;
	min-width:500px;
	text-align:center;
    background:url(../images/work/wood_gray.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
a, p, li, h3, h4 {
	font-family: 'Open Sans', sans-serif;
}
h1 {
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size: 100px;
	font-weight: 600;
	color:black;
}
h2 {
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size: 40px;
	font-weight: 400;
	color:black;
}
a {
	color:gray;
	text-decoration:none;
}
	a:hover {
		color:#ff7e79;
	}

nav {
	top:0;
	width:100%;
	position:fixed;
	background:white;
	box-shadow:0px 1px 5px gray;
    padding-top:10px;
    padding-bottom:10px;
    z-index:10;
    min-width:500px;
}
	nav a {
        color:#ff7e79;
		padding-left:5%;
		padding-right:5%;
		padding-top:10px;
		padding-bottom:10px;
        font-size:35px;
        font-family: 'Alegreya Sans SC', sans-serif;
	}
        nav a:hover {
            color:gray;
        }
            nav a:active {
                color:white;
                background:#ff7e79;
            }

/* Set Minimum Width of Page */

nav, #title, #work, #about, #contact, #map, #footer {
    min-width:500px;
}

/* Sections */

#title {
	padding-top:100px;
	min-height:500px;
    padding-bottom:100px;
    margin-bottom:-50px;
}
    #title h1, #title h2 {
        color:white;
    }
#work, #about, #contact, #mapside, #gallerywork {
    background:white;
    margin:0;
    margin-bottom:0px;
    padding-bottom:50px;
    padding-top:50px;
}
    #work h2, #about h2, #contact h2, #gallerywork h2 {
        color:black;
        text-shadow:none;
    }
#about {
    background:#ff7e79;
    padding-bottom:75px;
}
    #about h2, #about p {
        color:white;
    }
    #about p {
        text-align:justify;
        padding-left:10%;
        padding-right:10%;
        padding-bottom:25px;
        font-size:20px;
    }
    #about a, #work a, .formresponse a {
        border:1px solid white;
        color:white;
        border-radius:2px;
        padding:10px;
        padding-left:20px;
        padding-right:20px;
    }
        #work a:hover {
            background:white;
            color:rgb(50,50,50);
        }
            #work a:active {
                background:#ff7e79;
                color:white;
                border:1px solid #ff7e79;
            }
        #about a:hover, .formresponse a:hover {
            background:white;
            color:#ff7e79;
        }
            #about a:active, .formresponse a:active {
                background:#ffc179;
                border:1px solid #ffc179;
                color:white;
            }
    #gallerywork a {
        color:#ff7e79;
    }
        #gallerywork a:hover {
            color:gray;
        }
            #gallerywork a:active {
                color:#ffc179;
            }
#work, #gallerywork {
    padding-top:50px;
    padding-bottom:100px;
    background:rgb(50,50,50);
}
    #work h2, #gallerywork h2 {
        color:white;
    }
#gallerywrapper, #gallerywrapper2 {
    width:80%;
    margin-left:10%;
    font-size:0;
    box-shadow:0px 0px 50px black;
    margin-bottom:100px;
}
    #gallerywrapper img {
        width:33.33%;
        border:none;
        vertical-align:top;
        padding:0px;
        margin:0px;
    }
    #gallerywrapper2 {
        margin-bottom:25px;
    }
        #gallerywrapper2 img {
            width:50%;
            border:none;
            vertical-align:top;
            padding:0px;
            margin:0px;
        }
#map {
    background:white;
    height:600px;
    background:#ffc179;
    position:relative;
}
#mapside {
    color:white;
    background:none;
    width:50%;
    margin-left:50%;
    vertical-align:top;
}
    #mapside h2 {
        color:white;
        text-shadow:none;
    }
    #mapside p {
        text-align:justify;
        padding-left:20%;
        padding-right:20%;
        font-size:20px;
    }
    #address {
        background:white;
        width:60%;
        border-radius:2px;
        margin-left:20%;
        padding-top:15px;
        padding-bottom:15px;
        margin-top:25px;
    }
        #address p {
            color:gray;
            text-align:left;
            padding-left:5%;
            padding-right:5%;
        }
            #address:hover p {
                color:white;
            }
            #address p:nth-child(2), #address p:nth-child(3), #address p:nth-child(4) {
                padding-left:10%;
            }
        #address:hover {
            background:rgb(50,50,50);
            border:1px solid white;
        }
#contact p {
    width:60%;
    font-size:20px;
    margin-left:20%;
    text-align:justify;
}

/* Google Maps */

#map_canvas {
    width:50%;
    height:600px;
    margin:0;
    padding:0;
    vertical-align:top;
    float:left;
    z-index:0;
}

/* For IE */

img {
	border:none;x
}
.iedisplay {
    display:none;
}

/* PHP Mail Form */

form {
	margin-bottom:50px;
}
input, textarea {
	width:60%;
    padding:10px;
    font-size:20px;
    border-radius:2px;
    border:1px solid #ff7e79;
    background:rgb(250,250,250);
	font-family: 'Open Sans', sans-serif;
}
    input:focus, textarea:focus {
        outline:none;
        border:1px solid gray;
    }
	input {
		line-height:20px;
		margin-top:15px;
	}
	textarea {
	 	height:200px;
	 	resize: none;
		-moz-resize:none;
		margin-top:25px;
	}
.formbuttons {
    margin-top:50px;
}
.formbuttons input {
    width:200px;
    height:50px;
    color:white;
    background:#ff7e79;
    box-shadow:none;
    margin-left:2%;
    margin-right:2%;
    border:none;
    -webkit-appearance: none;
}
    .formbuttons input:hover {
        background:#ffc179;
    }
        .formbuttons input:active {
            background:gray;
        }

::-webkit-input-placeholder { 
	color:gray;
	font-size:20px;
	font-family: 'Open Sans', sans-serif;
}
::-moz-placeholder {
	color:#525252;
	font-size:20px;
	font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder {
	color:#525252;
	font-size:20px;
	font-family: 'Open Sans', sans-serif;
}
input:-moz-placeholder {
	color:#525252;
	font-size:20px;
	font-family: 'Open Sans', sans-serif;
}

/* Form Response */

.formresponse {
    width:80%;
    margin-top:25px;
    padding-top:25px;
    padding-bottom:50px;
    margin-left:10%;
    background:#ff7e79;
    border-radius:2px;
    box-shadow:0px 0px 50px black;
}
    .formresponse h2, .formresponse p {
        color:white;
    }
    .formresponse p {
        padding-left:5%;
        padding-right:5%;
    }

/* Gallery Floating Nav */

    .floater a {
        font-size:50px;
        position:fixed;
        color:white;
        top:45%;
        text-shadow:1px 1px 10px black;
    }
        .floater a:hover {
            color:#ff7e79;
        }
            .floater a:active {

            }
        .floater a:first-child {
            left:2%;
        }
        .floater a:nth-child(2) {
            right:2%;
        }

/* Telephone */

#tel {
    color:#ff7e79;
}

/* Footer */

footer {
	padding-top:10px;
	padding-bottom:10px;
	background:rgb(50,50,50);
}
	footer p {
        color:white;
		display:inline-block;
		margin-left:1%;
		margin-right:1%;
	}

/* Highlight */

::selection {
	color:white;
	background:#ff7e79;
}

/* Media Queries */

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

@media screen and (max-width:1000px) {
	#gallerywrapper img {
        width:50%;
    }
    #address {
        width:80%;
        margin-left:10%;
    }
    #mapside p, #mapside h2 {
        padding-left:10%;
        padding-right:10%;
    }
    #gallerywrapper2 {
        width:100%;
        margin-left:0px;
        margin-right:0px;
        margin-bottom:0px;
    }
    #gallerywork {
        padding-bottom:0px;
    }
    .floater a {
        font-size:60px;
    }
}
@media screen and (max-width:800px) {
	nav a {
        padding-left:3%;
        padding-right:3%;
        font-size:30px;
    }
    input, textarea {
        width:80%;
    }
    #contact p {
        width:80%;
        margin-left:10%;
    }
    #gallerywrapper img, #gallerywrapper2 img {
        width:100%;
    }
    #mapside {
        padding-top:10px;
    }
    #map_canvas, #map {
        height:700px;
    }
}