* {
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: "Bitstream Vera Serif Bold";

}

body {
    font-size: 100%;
    margin:0;
    box-sizing: border-box;
}

header {
    position: fixed;
    width: 100%;
    top:0;
    left:0;
    background: rgba(255, 255, 255, .92);
   z-index: 1;
    
}

#logo {
    width: 150px;
    margin: 20px auto;
    display: block;
    
}


#wrapper {
    width:75%;
    margin:240px auto 20px auto;
    max-width: 1100px;
    
    
}

nav {
    height:50px;
    line-height: 50px;
    background: brown;
    text-transform: uppercase;
    
}

nav ul {
    width: 70%;
    margin:0 auto;
}

nav li {
    float: left;
    list-style-type: none;
    width: 20%;
    text-align: center;
    position: relative;
}

nav a {
    text-decoration: none;
    color:#fff;
    display:block;
}

nav a:hover {
    color:#fff;
    background: #000;  
}

.home nav li:nth-child(1) a, 
.about nav li:nth-child(2) a,
.dogs nav li:nth-child(3) a,
.puppies nav li:nth-child(4) a,
.contact nav li:nth-child(5) a {
    background: grey;
    color: #fff;
    }

main {
    width:44%;
    float: left;
    margin-top: 20px;
    
}


aside {
    width:36.17%;
    float: right;
    border: 1px solid #666;
    margin-top: 20px;
    padding:10px;
}

.contact aside {
    padding:0;
    border: none;
   
}

figcaption {
    background: tan;
    padding: 10px;
    font-size: .875em;
    font-style: italic;
    text-align: center;
    
}

footer {
    height:50px;
    line-height:50px;
    border-top:1px solid red;
   clear: both;
    width: 100%;
   
}



footer li {
    height: 50px;
    line-height: 50px;
    float:left;
    list-style-type: none;
    margin-left: 30px;
    font-size: .85em;
    color:brown;
    
}

footer li a{
    color:brown
}

img {
    max-width: 100%;
    display: block;
    
}

/*++++++++Form+++++++++*/

fieldset {
    padding: 10px;
    border:1px solid red;
}
label {
    display: block;
    margin-bottom: 6px;
}

input {
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
        
}

input[type=submit] {
    width:auto;
}

textarea {
    width:100%;
    height:60px;
    resize: none;
    margin-bottom: 10px;
}

 p + ul {
    margin: 20px 0 0 0px;
    float:left;
}


#logo-small {
    display: none;
}

/*++++++++TYPOGRAPHY+++++++++*/


@font-face {
  font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
  }


h1 {
    
    font-size: 2.369em;
    margin-bottom: 8px;
    
    
}

h2 {
    font-size:1.777em ;
    margin-bottom: 8px;
    font-weight: 200;
    
}

h3 {
    font-size:1.333em ;
    margin-bottom: 8px;
    text-align: center;
}


p {
    margin-bottom: 1em;
    line-height: 1.5;
    
}

main p {
    font-weight: lighter;
    text-indent: 50px;
}
aside p {
    font-size: .75em;
}





.nav-button { display: none; } /* hide the navigation button by default */



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

@media only screen and (max-width: 840px){
    #logo {
        display: none;
    }
    #logo-small {
       display: block;
		position: fixed;
		top: -2px;
		left: 0px;
		width: 70px;
		z-index: 999;
    }
    #wrapper {
        margin-top:10.638298%;
        
    }
   
}

    
    
    
    
    
    
    
@media only screen and (max-width: 700px) {

/*
    h1, h2,h3, p {
        text-align: center;
    }
*/
    body{
        background: none;
    }
    header {
        width: 100%;
        background: none;
        position: fixed;
    }
    
    #logo {
        display: none;
    }
    main {
        width: auto;
    }
    
    nav {
        background: none;
        
    }
    
    #wrapper {
       text-align: center;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
        margin-bottom: 5px;
        
        width:auto;
    }
    
    aside {
    margin-left:22%;
    position: static;
    border: 1px solid #666;
    overflow: hidden;
    width:61.70%;
    float: none;
    margin-bottom: 10px;;
    
}
     footer {
    padding-top:10px;
    
}
    
    footer li {
    float:none;  
    
}
    
 





	/* Navigation Button
	-------------------------------------------------------- */

	.nav-button {
		display: block;
		position: fixed;
		top: 7px;
		right: 7px;
		width: 50px;
		height: 35px;
		background: url('../images/menu-icon-large.png'), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
		cursor: pointer;
		border: 0 none;
		border-bottom: 1px solid rgba(255,255,255,.1);
		box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
		border-radius: 5px;
		z-index: 999;
		text-indent: -9999px;
	}
    
        #logo-small {
		display: block;
		position: fixed;
		top: -2px;
		right: 7px;
		z-index: 999;
         
		
	}
   
	.nav-button:hover {
		background-color: rgba(0,0,0,.1);
	}
	.nav-button.open {
		background: url('../images/close-icon-large.png'), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2));
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 21px, 100%;
	}

	/* Navigation Bar
	-------------------------------------------------------- */

	body { padding-top: 50px; }

	.primary-nav {
		width: 100%;
		float: none;
		background-color: brown; /* change the menu color */
		background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2));
		display: block;
		height: 50px;
		margin: 0;
		padding: 0;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0,0,0,.6);
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 998;
		clear: both;
	}
	.primary-nav li {
		display: none;
		width: 100%;
		font-family: Arial;
	}
	.primary-nav li a {
		display: block;
		width: 100%;
		padding: 10px 5%;
		font-size: 14px;
		font-weight: bold;
		text-shadow: -1px -1px 0 rgba(0,0,0,.15);
		color: white;
		text-decoration: none;
		border-bottom: 1px solid rgba(0,0,0,.2);
		border-top: 1px solid rgba(255,255,255,.1);
	}
	.primary-nav li a:hover {
		background-color: rgba(0,0,0,.5);
		border-top-color: transparent;
	}
	.primary-nav > li:first-child {
		border-top: 1px solid rgba(0,0,0,.2);
	}

	/* Toggle the navigation bar open  */

	.primary-nav.open {
		height: auto;
		padding-top: 50px;
	}
	.primary-nav.open li {
		display: block;
	}

	/* Submenus – optional .parent class indicates dropdowns */

	.primary-nav > li:hover > a {
		background: rgba(0,0,0,.5);
		border-bottom-color: transparent;
	}
	.primary-nav li.parent > a:after {
		content: "▼";
		color: rgba(255,255,255,.5);
		float: right;
	}
	.primary-nav li.parent > a:hover {
		background: rgba(0,0,0,.75);
	}
	.primary-nav li ul {
		display: none;
		background: rgba(0,0,0,.5);
		border-top: 0 none;
		padding: 0;
	}
	.primary-nav li ul a {
		border: 0 none;
		font-size: 12px;
		padding: 10px 5%;
		font-weight: normal;
	}
	.primary-nav li:hover ul {
		display: block;
		border-top: 0 none;
	}

} /* End Mobile Styles */