#capetown {
   background-color: white;
   max-height: 200px;
   min-width: 100px;
   padding: 10px;
   position: absolute;
   top: 30px;
   left: 30px;
	border-radius: 10px;
	text-align: center;
}

.cptvalue {
	color: red;
}

#sidebar {
   min-width: 250px;
   z-index: 1000;
   margin-top: -70px;
   margin-left: 20px;
   padding-bottom: 40px;
   text-align: center;
}

#side-button {
   display: none;
}

.side-content {
   padding-top: 10px;
   height: 100%;
   background-color: white;
   border-radius: 5px;
   background-size: cover;
   box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
   background: #fff 50%;
   transition: all .5s ease;
}

.sidelink {
   padding: 1px;
   border: 1px solid grey;
   margin-top: 3px;
   margin-left: 10px;
   margin-right:10px;
   border-radius: 7px;
   background-size: cover;
   background-color: white;
   box-shadow: 8px 14px 38px rgba(39,44,49,.06), 1px 3px 8px rgba(39,44,49,.03);
   background: #fff 80%;
}

.sidelink a {
   text-decoration: none;
   color: grey;
}

.sidelink:hover {
   box-shadow: 0px 0px 0px rgba(39,44,49,.06), 0px 0px 0px rgba(39,44,49,.03);
   background: #fff 0%;
   background-color: #e8e8e8;
}


.inner {
   max-width: 1400px;
}

@media (min-width: 1005px) {
   #sidebar {
      grid-area: sidebar;
   }

   #site-main {
      display: grid;
      grid-template-areas:
      "content sidebar"
      "navigation navigation";
   }
	#main-content {
   	grid-area: content;
	}  

	#pagination {
   	grid-area: navigation;
	}  


}

@media (max-width: 1005px) {


   #side-button {
      position: fixed;
      top: 10px;
      right: 10px;
      display: block;
      z-index: 2000;
		border: 1px solid grey;
		padding: 2px;
		background-color: white;
		border-radius: 5px;
	}
	.bar-button {
		border-bottom: 18px double grey; 
    	border-top: 6px solid grey; 
    	content:"";
    	height: 30px; 
    	width: 40px;
   }
   #sidebar {
		position: fixed;
      display: block;
		margin-left: 5px;
		bottom: -33px;
		top: 5px;
      right: 0px;
		z-index: 1000;
      overflow-x: hidden;
		margin-top: 0px;
      width: 0;
      min-width: 0;
      transition: .5s;
      padding-left: 5px;
      padding-right: 5px;
   }
}

@media (max-width: 1005px) and (min-width: 901px) {
	.post-feed {
		margin-top: -40px !important;
	}
}



@media (max-width: 900px) {

   #capetown {
      /* display: none */;
      width: 100%;
      top: 0px;
      left: 0px;
      position: initial;
      border-radius: 0px;
      padding: 0px;
   }

   .cptrow {
      display: table;
      float: left;
      padding-left: 5px;
   }

   .cpthead {
      float: left;
   }
}

@media (max-width: 650px){
	.post-feed {
    	padding-top: 10vw;
	}
}
