/* set defaults */

html, body, h1, h2, h3, h4, h5, h6, img, ul, li {
    margin:0;
    border:0;
	padding:0;
    /* for mobiles */
    -webkit-text-size-adjust:none;
    }

body {
    width:100%;
    min-width:100%;
	color:#000;
    background-color:#282F39; /* same as footer, used for screens over 1920px and when footer doesn't fill to bottom of screen */
    font-family:Raleway, Calibri, Arial, Serif;
    font-size:100%;
    }

a {
    text-decoration:none;
    outline:0;
    color:#000;
    }

a:hover {
    color:#fff;
    }

img {
    max-width:100%;
    height:auto;
    }

li {
    list-style-type:none;
    display:inline;
    }

/* home page */

#top {width:100%; height:50px; color:#fff; background-color:#282F39; font-size:110%; letter-spacing:1px;}
#top span {float:left; margin:15px 0 0 15px;}
#top a {color:#fff;}
#top img {margin-right:5px; vertical-align:middle;}
#top ul {float:right; margin:15px 15px 0 0;}
#top ul li:nth-child(even) {margin:2.5px;} /* line */

.clear-float {clear:both;}

#wrapper {
    background-color:#FFD897; /* when content extends background image, only occurs for first image as position -300px */ 
    background-image:url(../graphics/background1.png); /* 1920x1080 */
	background-position:center -300px; /* left top, update js file if changed here */
    background-repeat:no-repeat;
    width:100%;
    max-width:1920px;
    margin:0 auto;
    position: relative; /* for absolute positioned elements */ 
    }

@media only screen and (min-width:1921px) { /* apply border for large screens */
    #wrapper {border:1px solid #ccc;}
    }

header {
    padding-top:25px;
    text-align:center;
    color:#282F39;
    }

header h1 {
    background-color:transparent;
    font-family:'Poiret One';
    font-size:700%;
    /* opacity:0.7; */
    }

header span { /* studios */
    color:#808080;
    font-size:90%; /* inherits size from h1 element */
    }

header h5 { /* web design studio */
    font-size:175%;
    font-family:'Great Vibes';
    margin-top:12.5px;
    }

#header_line {
    border-bottom:1.5px solid #808080;
    position:absolute; /* gets relative position from wrapper */
    top:185px;
    height:0;
    width:12.5%;
    margin:0 auto;
    }

#header_line:first-of-type {
    left:-30%;
    right:0;
    }

#header_line:last-of-type {
    left:0;
    right:-30%;
    }

/* animation */
header h1 {
    animation: h1-ani 1.5s ease forwards;
    }

header h5 {
    animation: h5-ani 1.5s ease forwards;
    }

@keyframes h1-ani {
    0% {
        transform: translateY(150px);
        opacity:0; 
    }

    100% {
        transform: translateY(0);
        opacity:0.7; 
    }
}

@keyframes h5-ani {
    0% {
        transform: translateY(-50px);
        opacity:0;
    }

    100% {
        transform: translateY(0);
        opacity:1;
    }
}

#birds {
    position:absolute; /* gets relative position from wrapper */
    top:150px;
    left:325px;
    z-index:5;
    opacity:0.7;
    }

#text-panel { /* scroll.css also styles panel */
    width:50%;
    font-size:150%;
    margin:20px auto 0 auto;
    text-align:center;
    background-color:#EBEAE6;
    opacity:0.8;
    filter:alpha(opacity=60); /* for ie8 and earlier */
    padding-top:15px;
    -moz-box-shadow: 0 0 5px 5px #ccc;
    -webkit-box-shadow: 0 0 5px 5px #ccc;
    box-shadow: 0 0 5px 5px #ccc;
    position:relative;
    z-index:1;
    }

#text-panel a {transition:background-color 1s ease; padding:0 10px;}
#text-panel a:hover {color:#fff; background-color:#808080;}
#text-panel nav {margin-top:15px; text-align:center; font-weight:bold;}
#text-panel nav ul li:nth-child(even) {margin:0 15px;} /* lines */
#text-panel .line {width:50%; height:1px; background-color:#C0C0C0; margin:1.5% auto;}
#text-panel h5 {color:#fff; background-color:#808080; padding:5px 0; margin-top:25px;}
#text-panel h5 span {margin-left:-15px;} /* text slightly off */
#text-panel p span {font-weight:bold;} /* lemonpie studios */
#text-panel #home p:first-of-type {margin-top:25px;}
#text-panel #about p:first-of-type {margin-top:25px;}
#text-panel #contact p:first-of-type {margin-top:15px;}

section {
    color:#CC5707; /* update js file if changed here */
    margin-top:100px;
    font-size:150%;
    text-align:center;
    line-height:30px;
    }

section p {
    width:50%;
    margin:0 auto;
    }

section p:last-of-type {
    margin:25px auto;
    }

section p::first-letter {
    font-size:200%;
    }

section #first_section {
    width:100%;
    background-color:#FFEDBB;
    padding:25px 0;
    }

section #second_section {
    width:100%;
    background-color:#E7C385;
    padding:25px 0;
    }

section #third_section {
    width:100%;
    background-color:#D6C6A4;
    padding:25px 0;
    }

.circle {
    width:25px;
	height:25px;
    background-color:#CC5707;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
	border-radius:50px;
    display:block;
    margin:0 auto;
    position:relative;
    top:-35px;
    }

footer {
    color:#fff;
    background-color:#282F39;
	padding:10px 0;
	text-align:center;
	width:100%;
    font-size:125%;
	}
	    
footer h5, footer h6 {
    padding-top:5px;
    }

footer h5:first-child { /* date */
    padding-bottom:5px;
    border-bottom:1px solid #ccc;
    margin:0 auto 2.5px auto;
    width:20%;
    }
    
footer a {
    color:#fff;
    }

/* contact section */

#contact p {
    margin:12.5px;
}

#contact input[type=text], textarea {
    width:75%;
    padding:7.5px;
    border:1px solid #ccc;
    border-radius:5px;
    box-sizing: border-box;
    font-size:115%;
    font-family:inherit; /* force css font style for textarea */
}

#contact textarea {
    resize:none;
}

#contact button {
    color:#fff;
    background-color:#CC5707;
    padding:10px 20px;
    border:none;
    border-radius:5px;
    width:175px;
    font-weight:bold;
    -webkit-box-shadow:0 2.5px 5px #888888;
    -moz-box-shadow:0 2.5px 5px #888888;
    box-shadow:0 2.5px 5px #888888;
    transition:1s;
    cursor:pointer;
}

#contact button:hover {
    color:#000;
    background-color:#E8B167;
}

#contact h6 {
    margin-top:5px;
}