html, body{ width : 100%;
    overflow-x: hidden;
    font-family: Arial,"Times New Roman"
}

#content{ width: 100%; 
  padding-bottom : 20px;
  /*! background-color:#d4e8e840; */ 
}

#navigation{ width: 100%; 
  height: 40px; 
  /*! margin-bottom: 10px; */
  padding-top: 10px;
  overflow: hidden; 
  border-bottom: 1px solid #ccc;
}

#navigation a{ padding: 20px; color : #117;}
#navigation .active{ color: #888;}

#nav_social{
  float : right;
  margin-right: 10px;
}
#nav_social a{
  color: #fff;
  padding: 0 10px;
  filter: opacity(50%);
}

#nav_social a:hover{
  filter: opacity(100%);
}

#menu_img{display: none;}

.two_panel{ display: block; width: 100%;}
.panel_one, .panel_two{ width: 45%; display : inline-grid;}

.panel_two{ float: right;}
.round{ border-radius: 50%;}

.contacts{ padding: 10px;}
.contacts a{ color: #000;}
.contacts img{ vertical-align:  middle;}

#profileIMG{
  margin-top: 20px;
}

.home_cards{ display: inline-grid; 
  width: 240px; 
  height: 240px; 
  overflow: hidden;
  margin : 10px;
}
.home_cards img{ width: 100%;
  height: 100%; 
  filter: brightness(80%);
  border-radius : 5px;
}
.home_cards img:hover{filter : brightness(100%);}
.fav_books div{ display:  inline-block;}
.fav_books img{ vertical-align: middle; margin: 5px;}
.fav_books a{ color: #000; text-decoration : none;}
.fav_books a:hover{ text-decoration: underline;}

#home_about{ width: 60%; margin-top: 50px;}

#story{ padding: 5px 20px;}
.cover{ height: 250px; float: left; margin-right: 20px;}
#story blockquote{white-space: pre-wrap;}


#builds_list li{ display: block; clear: both; padding : 10px 30px 0px 0px; }
#builds_list p{ display: flex;}
#builds_list img{width: 240px; height: auto; float : left; 
  margin : 5px 20px 5px 5px;}

.blog_list img{
  width: 200px !important;;
}
.blog_list li{
  padding: 10px !important;
}

#projects_list {text-align: left;}

#projects_list li{  border: 1px solid #ccc; padding : 10px; }

#projects_list img{width: 120px; height: auto; margin-right : 20px; vertical-align : middle; }

#projects_list div, #other_list div {
  display:  inline-block;
  vertical-align : top;
}

.child_1 {
  width: 150px;
}

.child_2 {
  width: 60%;
}

.child_2 span {
  display: block;
  margin-top: 10px;
}

.projectinfo {
  margin: 5px 0 0 0; padding: 0;
}
.projectinfo li{   border: none !important; margin : 5px !important; padding: 0px !important;;}

#projects_list .img_link{ text-decoration: none;}

.newline{display: block; clear: both;}

#other_list img{ width: 100px; }

.screenshots figure{ display: inline-grid;}

#sketches_wrapper{
  width: 100%;
  background: #000;
}

.sketch_card{
  display: inline-grid;
  width: 320px;
  height: auto;
  vertical-align: top;
  margin : 10px;
}

.sketch_card img{
  width: 100%;
}

#prev_button, #next_button{ 
  position:absolute; 
  top: 60%;  
  margin:0px; 
  cursor: pointer; 
  z-index: 20;
  font-size:2em;
}
#prev_button{left: 50px;}
#next_button{ right: 50px;}
#prev_button a, #next_button a{
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    padding: 17px 25px;
    z-index: 20; 
}

.next , .previous{
  background-color: #74dfdf5e;
  color: white; 
}

.button_off{ background-color: #f1f1f133;
    color: black;border-radius: 50%; 
}

.round { border-radius: 50%; }

#about_article{border: 1px solid #EEE;
  padding: 10px;
  background-color: #FFF;}
#profile_about_img{
  float: left;
  margin-right: 10px;
}

.projectinfo{
  display: inline-block;
}

.image-row {
  display: flex;
  width: 75%;  
  padding-left: 10px;
}

.image-row img {  
  flex: 1;
  margin-right: 10px;
  width: calc(100% / 3);
  height: auto; 
  flex-shrink: 0;
}

.small-row {
  display: inline-block;
  width: 100%;
  padding-left: 10px;
}

.small-row img {
  display: inline;
  margin-right: 10px;
  width: 240px;
  height: auto; 
}

.two-cells-img {
  display: flex;
  width: 70%;  
  padding: 10px;
}

.two-cells-img img {  
  flex: 1;
  margin-right: 60px;
  width: calc(100% / 3);
  height: auto; 
  flex-shrink: 0;
}

.videos_ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.pdf-icon {
    width: 20px;
    height: auto; 
    margin-right: 15px;
}


/*  ______ MOBILE _________ */

@media screen and (min-width: 1px) and (max-width:999px){
  #navigation{ height: auto; display : none;}
  #navigation a{ display: block; padding:10px; }
  #nav_social{ float : none;}
  #menu_img{display: block; 
    position: absolute; 
    right: 10px; top: 10px;
    width:50px; height:50px;
  }
  .two_panel{
    padding-top: 20px;
  }
  .panel_one, .panel_two{ width: 100%; display : block;}
  .panel_two{ float: none;}
  #content{ background-color: unset;}
  .panel_two .round{ width : 150px;}
  .home_cards{ width: 150px; height: 150px;}
  .fav_books p{ padding: 0 5px}
  #home_about{ width: 98%; margin-top: 10px;}
  
  #builds_list, #projects_list{ padding: 5px;}
  #builds_list p{ display: block;}
  #builds_list img{width: 280px; height: auto; float : none; margin-right : 0;}
  #story img{max-width: 100%;
    float: none; 
    margin: 0; 
    display : block;
    clear : both;
  }
  
  #prev_button, #next_button{ 
    right: 10px;
  }
  
  .child_2 {
    width: 100%;
    padding: 5px;
  }

  .videos_ul iframe {
    max-width: 100%;
  }
}