@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400&display=swap');

*{
  margin:0;
  padding:0;
  text-decoration:none;
  box-sizing: border-box;
}
html{
    height: 100%;
    width: 100%;  
}
body {
  margin: 0, auto;
  padding: 0;
  font-family: 'Heebo', sans-serif; /*was 'Lato'*/
  color: #666666;
  background-color: #f2f0e8;  /*from her old site: #F6F5ED*/
  text-align: left;
  font-size: 1em;
}

#bar {
	border-top: #A23924 solid 5px;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 5;
	
}
#page {
max-width: 982px;
margin: 0 auto;
text-align: left;
    height: 100%;
}

	
a {
  color:#A23924; /* #9794B2; */
  text-decoration: none;
}
a:hover {
  color: #3f5266;
}

li {
    list-style-image: none;
}
img {
    box-shadow: 2px 2px 5px rgba(91, 91, 91, 0.4);
}
section {
    margin-bottom:2.5%;
}
header {
    margin: 18px auto;
    max-width:980px;
    text-align: left;
}

h1 { 
    padding: 10px;
	font-family: 'Heebo', sans-serif;
	text-align: left; /*decide whether this goes on the left or right on the desktop version */
	color: #A23924;
	font-weight:400;

}
h2 {
    margin:10px;
	padding-left:1%;
    font-size:130%;
	font-family: 'Heebo', sans-serif;
	text-align:left;
	color: #666; /*#A23924*/
	font-weight:400;
}

h3, h4 { font-family:'Heebo', sans-serif;
	text-align:left;
	color: #541345; /*#A23924*/
	font-weight:400;
	font-size:110%;
	margin-top: 2.5%;
	margin-bottom: 1%;
	
}
h3.mt {
	margin-top:0;
	font-size:125%;
}
h4 {
	margin-top:6px;
}



/* flexbox */

.container-2, .container-3, .container-4, .container-5 {
    display: flex;
    flex-wrap:wrap;
    margin-left:25%;
    width:75%;
    justify-content: center;

}

.container-bio, .container-reviews {
	margin-left:20%;
    width:80%;
	font-size: 80%;
	line-height:150%;
	border-top: solid thin #666;
    padding:6px;
    border-bottom: solid thin #666;

}

.container-4 {
	margin-left: 1px;
	width:100%;
	margin-bottom:5%;
}

.container-5 {
	margin-left:10%;
	margin-bottom:5%;
}

.container-reviews {
	margin-left:2.5%;
	width:95%;
}

.container-bio p {
	margin-bottom: 18px;
}

.container-reviews p {
	margin-bottom: 18px;
}
.flex-item-2 { 
    flex: 0 0 200px;
    padding: 8px;
}

.flex-item-3 { 
    flex: 0 0 150px;
    padding: 8px;
}

.container-3 {
	width: 65%;
}  /*this is for paired items -  or when you need a wider sidebar */
	
    
article {
        margin: 2% auto;
        max-width: 960px;
        height: 100%;
    }
	
	
.anno {
    font-size: 85%;
}	
footer p{
    line-height: 100%;
    padding-right: 25px;
    margin: 0;
    font-size:65%;
    text-align:right;
    margin-top: 2.5%;
}
/*sidebar */

.sidebar, .sidebar-2, .sidebar-bio {
  list-style-type: none;
  padding: 0 12px;
  height: 100%; /* Full height */
  width: 25%;
  float: left;
 
}

.sidebar-2 {
	width: 35%;
}

.sidebar-bio {
	width:20%;
}

.sidebar-bio img {
	max-width:135px;
}
.statement p {
    font-size:80%;
    margin:12px 6px;
	line-height:150%;
}

.statement {
    border-top: solid thin #666;
    padding:6px;
    border-bottom: solid thin #666;
  
}

/* MENU always hidden on the side with hamburger - from W3schools.com */
header>nav {
    text-align: left;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color:#999;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav li {
  padding: 0 8px 4px 24px;
  text-decoration: none;
  font-size: 95%;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidenav a {
 /* padding: 4px 8px 4px 32px;*/
  text-decoration: none;
  font-size: 95%;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidenav li a:hover {
  color: #A23924;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
nav>span {padding-left:1.25%;}

li.portfolio {
    padding-left:18px;
	font-size:95%;
}

li.portfolio a {
	padding-top:4px;
	padding-bottom:4px;
}

.sidenav li.last {
	padding-bottom:8px;
}

li.select { color:#A23924; padding: 0 8px 4px 16px;}
li.select2 {color:#A23924; padding: 0 8px 4px 24px;}

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

/*MEDIA QUERIES*/
@media (max-width: 768px) {
header, article {
        margin-left: 2%;       
    }
#kasaya2 header {
	margin-right:5%;
}
#kasaya2 h2 {
		margin-bottom:5px;
		
	}
.sidebar, .sidebar-2 {
        float:none;
        width:100%;
		padding: 0 24px 0 12px;
    }

	
 .container-2 {
        width:100%;
        max-width: 480px;
        margin:2% auto;
    }
.container-3 {
		width:90%;
		margin: 2.5% auto;
	}
.container-bio {
	width:70%;
	margin-left:25%;
}

nav>span {
	padding-left: 2.25%;

}
	
	
}

@media (max-width: 480px){
    header {
        width: 95%;
    }

.container-bio {
	width:95%;
	margin-left:1.5%;
	
}
	
.sidebar-bio {
	display:none;
}
		
}