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

@charset "UTF-8";

 body{
    font-family: Arial,Verdana,sans-serif;
    font-size: 1.3 rem;
    line-height: 1.2;
    background-attachment: fixed;
	 
 }

 li{
 font-size:1.2rem;
 
 }

 .responsive-photo-90 {
 display:block;
 width:90%;
 margin-right:auto;
 margin-left:auto;
 max-width:800px;
 }

/*div  header above Media query on opening page*/

		

.work{
	/*background: lightyellow;*/
	/*width: 950px;
	margin: 0 auto;
	color: darkred;*/
	
	
	}

.content-wrap{
	max-width: 300px;
	margin: 0 auto;
	/*width:950px;*/
       /*background-color:#00cc99;*/
	   /*color: darkred;*/
      /* min-height:480px;*/
       padding:10px;
      /* margin-left:auto;
       margin-right:auto;*/
	
}

/*div  paragraph underneath  Media query on opening page*/

.body-content{
	font-size: 20px;
	max-width: 950px;
	margin: 0 auto;
	/*width:950px;*/
       /*background-color:#00cc99;*/
	   color: darkred;
      /* min-height:480px;*/
       padding:50px;
      /* margin-left:auto;
       margin-right:auto;*/
	
}


	

 /*The two new media queries are listed below*/

 /*MEDIA QUERY 1: Media query for viewports 960px and wider*/

/*THIS REPLACES MEDIA QUERY 1 - Media query for viewports 960px and wider*/ 
@media (min-width: 960px) {

      h1{
       font-size:2.5rem;
	   font-family: 'Merienda One', cursive;
       }

      article{
       width:950px;
       background-color:#00cc99;
	   color: darkred;
       min-height:480px;
       padding:5px;
       margin-left:auto;
       margin-right:auto;
       }

       /*The following style rules are new*/


      #navbar{
       list-style:none;
       margin-bottom:10px;
       float:left;
       width:940px;
       padding:5px;
       background-color:silver;
       } 

      #navbar li{
       font-size:1.2rem;
       float:left;
       margin-right:40px;
       margin-left:40px;
       position:relative;
       }

      #navbar a{
       display:block;
       padding:5px;
       color:white;
       background:black;
       text-decoration:none;
       }

      #navbar a:hover{
       color:yellow;
       text-decoration:none;
       } 
      /*Dropdown styling*/

       #navbar ul{



      list-style: none;
       position: absolute;
       left: -9999px; /*Hide off-screen when not hovered over*/
       } 

      #navbar ul li{
       padding-top:5px; /*Between the li items for spacing*/
       float:none;
	   
       margin-left:-25px;
       }

      #navbar ul a{
       white-space:nowrap; /*Stop text wrapping*/
       }

      #navbar li:hover ul{ /*Display the dropdown on hover*/
       left:0; /*Bring back on-screen when needed*/
       }

      #navbar li:hover a{ /*The top link display when a user hovers over sub-menu items*/
       text-decoration: none;
       background-color: gray;
       } 

      #navbar li:hover ul a{ /*The hover state defined a global style for links even before they're hovered over. Here we undo these effects.*/
       text-decoration:none;
       }

      #navbar li:hover ul li a:hover{ /*Defines the most explicit hover states when a user hovers over an individual link.*/
       background-color:black;
       }

} /*END MEDIA QUERY 1*/


 /*MEDIA QUERY 2: Media query for viewports 959px and narrower*/

/*THIS REPLACES MEDIA QUERY 2 - Media query for viewports 959px and narrower*/


@media (max-width: 959px) {    

      h1{
       font-size:1.5rem;
	   font-family: 'Merienda One', cursive;
       color:black; /*I added a font color of black to our <h1> style.*/
       }
	    
	   h2{
       font-size:5.5rem;
	   font-family: 'Merienda One', cursive;
       color:darkred; /*I added a font color of black to our <h1> style.*/
       } 

      article {
       background-color:#99ccff;
	   color:black;
       min-height:480px;
       padding:5px; /*I added some padding to our <article> style.*/
       }

       /*The following style rules are new*/

      a{ 



       font-size:1.5rem;
       text-decoration:none; 
       }

      #navbar{
       list-style:none;  



       margin-bottom:10px;
       }

      #navbar li{
       position:relative;
       margin-left:-40px; 



       }

       #navbar a{ 



      font-size:1.25rem;
       display: block;
       width: 66%;
       padding: 10px;
       margin-bottom: 5px;
       color: white;
       background: black;
       text-decoration: none;
       border-radius: 1px 5px 5px 1px;
       }

       #navbar a:hover{ 



       color:yellow;
       text-decoration:none;
       } 

      /* hide submenus in mobile devices */

       #navbar ul li{
       display:none; 



      }

       #navbar li:hover a{ 



       text-decoration: none;
       background-color: gray;
       border-radius: 5px 25px 25px 5px;
       border-bottom: thin white solid;
       width:75%;
       }

 } /*END MEDIA QUERY 2*/

 } /*END MEDIA QUERY 2*/

.services {
	
	 h1{
       font-size:20.5rem;
	   font-family: 'Merienda One', cursive;
       }

      article{
       width:950px;
       background-color:#00cc99;
	   color: darkred;
       min-height:480px;
       padding:5px;
       margin-left:auto;
       margin-right:auto;
       }
}

.footer { 
position: relative;
	top: 25px;
 top: 25px;
}