body, div, #container, header, #logo, h1, nav, .navigation-menu-button, ul, li, h2, p, aside {
   border: 0;
   padding: 0;
   margin: 0;
}
/*body*/
body{
    background-image: url(../images/moodboardbg3.jpg);
}
/*container*/
body div#container{
    max-width:90%;
    height:1050px;
    background-image: url(../images/phonebg.jpg);
    background-size: 100% 100%;
    margin:0 auto;
    margin-top: 2%;
    background-repeat: no-repeat;
    border:3px solid white;
}

/*header*/
#logo{
        display: none;
    }
#container header h1{
    font-size: 30px;
    margin-top:10%;
    margin-left: 5%;
}
    
     
/*h1*/
*#container header h1{
    text-align: center;
    max-width:65%;
    width:65%;
    float:left;
    margin-top:5%;
    font-family: ar berkley;
    color: #401106;
    font-size: 60px;
}



/* site navigation bar */
nav.sitenavigation {
	width:18%;
	float:right;
	padding:5% 1%;
	position:relative;
    font-family: Arial Rounded MT Bold;
}
div.navigation-menu-button{
	float:right;
    margin-right: 20px;
}
nav.sitenavigation ul {
	border:3px solid #34180f;
   display:none;/*hide the navigation bar*/
   position:absolute;
   right:5%;
   top:70%;
   z-index:2;
}
nav.sitenavigation li {
   margin: 0.3em 0.5em;
   font-size: 1.3em;
   line-height: 1.4em;
   text-align: left;
    text-decoration: none;
   /*display: inline-block;*/
}
nav.sitenavigation a:link {
   text-decoration: none;
   color: #411106;
}
nav.sitenavigation a:visited {
   color: #411106;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
   color: ivory;
}






.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:#D3D3D3;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 10px 14px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/*artice*/
article{
    max-width:41.5%;
    margin-left: 40px;
    float:left;
}
article h2{
    font-family: Cooper Black;
    text-shadow:-3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
    font-size: 20px;
    margin-top:15%;
}
article h3{
    font-family: Copper Black;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 0;
}
article li{
    font-family:Copper Black;
    color:#401106;
    font-size: 20px;
}
article ul{
    margin-top: 0;
}
.interest{
    font-family: Cooper Black;
    text-shadow:-3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
    font-size: 15px;
    margin-top: 5%;
}
article p{
    margin-left:2%;
    font-size: 10px;
    font-family: Cooper Black;
}
article p span{
     text-shadow:-3px 0 white, 0 3px white, 3px 0 white, 0 -3px white;
    color:#a81519;
    font-size: 18px;
}

/*aside*/
aside{
    display:none;
}



@media screen and (min-width:480px), print{
    #logo{
        display: none;
    }
     #container header h1{
        font-size: 30px;
    }
     article h2{
         font-size: 20px;
     }
     article p span{
         font-size: 18px;
     }
     article p{
         font-size:15px;
     }
     .interest{
         font-size: 20px;
         margin-top: 5%;
     }   
    aside{
        display: none;
    }
}
@media screen and (min-width:800px){
    body div#container{
        background-image: url(../images/webbg.jpeg);
        background-size: 100% 100%;
    }
    #logo{
        max-width: 25%;
        float:left;
        display:block;
    }
    #container header h1{
        font-size: 60px;
    }
    nav.sitenavigation{
        font-size: 2em;
        width:100%;
        padding: 0;
    }
    
    div.navigation-menu-button{
		display:none;
	}
    
	/*display horizontal*/
	nav.sitenavigation ul {
		border:none;
		width:100%;
		display:block;
		position:static;
		text-align:center;
        padding-left:8%;
	}
	nav.sitenavigation li {
        margin: 0em 0.5em;
        line-height: 1.4em;
		display:inline-block;
	}
    
    article{
        margin-left: 50px;
    }
    article h2{   
        font-size: 50px;
        margin-top:5%;
    }
    article h3{
        font-size: 40px;
    }
    article li{
        font-size: 20px;
    }
    .interest{
        font-size: 50px;
    }
    article p{
        font-size: 30px;
    }
    article p span{
        font-size: 40px;
    }       
    aside{
        display: block;
        max-width:50%;
        width:30%;
        float: right;
        /*border: 3px solid black;*/
        margin-top: 80px;
        margin-right: 70px;
    }
}

@media screen and (min-width:1050px){
    aside{
        width: 20%;
        margin-right: 20%;
    }
    


}
/*print styles*/
@media print {
   body, h1, article, footer {
      color: rgb(0,0,0);
      background: rgb(255,255,255);
   }
    #logo{
        margin-right:10%;
    }
   body {
      max-width: 100%;
   }
   nav {
      display: none;
   }
   section {
      page-break-before: always;
   }
}
@page {
   margin: 0.75in;
}