.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color:wheat;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 4px 4px 4px 9px;
  text-decoration: none;
  font-size: 12px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 20px;
  margin-left: 35px;
}

@media screen and (max-height: 900px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 12px;}
}



/*grid layout*/
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'bod1 bod1 bod1 bod1 bod1 bod1'
    'bod2 bod2 bod2 bod2 bod2 bod2'
    'bod3 bod3 bod3 bod3 bod3 bod3'
    'bod4 bod4 bod4 bod4 bod4 bod4'
    'footer footer footer footer footer footer';
  grid-gap: 10px;
  background-color: white;

}

.grid-container > section {
    box-sizing:border-box;
  text-align: center;

  font-size: 15px;
}

/*grid sections*/
.header { 
    grid-area: header;     
    background-image: URL(bg1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
     padding: 10px 0;
}

.bod1 { 
    grid-area: bod1; 
    background-color: WHITE;
    position:relative;
    max-width:100%;
    max-height:100%;
}
.bod2 {
    grid-area: bod2; 
    background-color: #C7C7C7;
    position:relative;
     max-width:100%;
    max-height:100%;
    
}
.bod3 { 
    grid-area: bod3; 
    background-color:  #D2B48C;
    position:relative;
    
}
.bod4 {
    grid-area: bod4;
    background-color: WHITE;
    position:relative;
    
}

.footer {
    grid-area: footer; 
    background-color: #C7C7C7;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display:grid;
    position:relative;
    grid-template-areas:
    'ftitle ftitle ftitle'
    'fcol1 fcol2 fcol3'
    'fcol1 fcol2 fcol3'
    'fcol1 fcol2 fcol3'
    'tag tag tag';
}
/* grid inside footer section*/
.ftitle {
    grid-area: ftitle;
    position:relative;
}
.fcol1 {
    grid-area: fcol1;
    position:relative;
}
.fcol2 { 
    grid-area: fcol2;
    position:relative;
}
.fcol3 { 
    grid-area: fcol3;
    position:relative;
}

.tag{
    grid-area: tag;
    position:relative;
   margin-left:auto;
   margin-right:auto;
}

/*tags across all pages*/

h1{
    font-size: 15px;
    font-family: Freestyle Script;
}

h3{
    font-size: 11px;
}

p{
    font-size: 10px;
    padding:0 15px;
}

img{
    width:500px;
    height:400px;
    max-width:100%;
   max-height: 100%;
  
}

a{
    color: black;
    text-decoration: none; 
}


button {
  background-color: none;
  border: 2px solid wheat;
  color: black;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  cursor: pointer;
}




.welcome{
    margin-top: 10px;
    margin-left:10px;
}


/*container for heading*/
.container{
    display:flex;
     box-sizing:border-box;
    max-width:100%;

}

.left-container{
    flex-basis:50%;
    
}

.right-container{
    flex-basis:50%;
    display:grid;
    grid-template-areas:
    'phrase phrase phrase phrase'
    'phone phone phone phone1'
    'nav nav nav nav';
    height:250px;
    max-height:100%;
    box-sizing:border-box;
    padding:0 10px;
 
}


.phrasegrid{
    position:relative;
    text-align:right;
   grid-area:phrase;
}

.phonegrid{
    position:relative;
    grid-area:phone1;
    align-items:right;
    text-align:right;
    margin-top:10px;
 
}

.navgrid{
    position:relative;
    grid-area:nav;
    margin-top:15px;
    
}
.logo{
    max-width: 250px;
    max-height: 250px;
    padding-left: 20px;
    float: left;
}


/*nav bar*/
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}



.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 12px;  
    border: none;
    outline: none;
    color: black;
    padding: 8px 12px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}


.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 70px;
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
    z-index: 1;
   
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 5px 8px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

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