/* Default sizes for below 569 pixel width */
/*/*

/* Main styles */
.main_area {
    padding-top: 20px;
}

.sidespace {
    width:100%;
    order:-1;
}

.projects {
    width:100%;
}

.project_header {
  font-size: 24px;
  margin-left: 20px;
  width: 100%;
  padding-bottom: 10px;
}

.project_box_resume, .project_box_game, .project_box_web, .project_box_map, .project_box_feeder, .project_box_heart {
  width: calc((100% - 10px)/1);
  margin: 5px 40px 20px 40px;
  border: 2px solid white;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}



.project_box_resume {order:1;}
.project_box_game {order:2;}
.project_box_web {order:3;}
.project_box_map {order:4;}
.project_box_feeder {order:5;}
.project_box_heart {order:6;}



/* Breakpoint for landscape mode of phones*/
@media screen and (min-width: 475px) {


/* Main styles */

main.horiz_bar {display: none;}

.header_area {
        padding-bottom: 20px;
}



.project_box_resume, .project_box_web, .project_box_feeder {
  width: calc((100% - 60px)/2);
  margin: 5px 10px 20px 20px;
}

.project_box_game, .project_box_map, .project_box_heart {
  width: calc((100% - 60px)/2);
  margin-top: 5px;
  margin: 5px 20px 20px 10px;
}

}

/* Breakpoint for tablets*/
@media screen and (min-width: 569px) {


/* Main styles */
.project_header {
  font-size: 24px;
  margin-left: 20px;
}

.project_name {
  font-size: 14px;
}



/* Breakpoint for at 700 pixels*/
@media screen and (min-width: 769px) {

/* Main styles */


.sidespace {
    width: 35%;
}

.project_header {
  font-size: 24px;
  margin-left: 20px;
  text-align: right;
  margin-top: 3px;
}

.projects {
    width: 65%;
}

.project_box_resume, .project_box_game {
  width: calc((100% - 80px)/3);
  margin: 5px 10px 20px 20px;
}

.project_box_web, .project_box_map {
  width: calc((100% - 80px)/3);
  margin-top: 5px;
  margin: 5px 10px 20px 10px;
}

.project_box_feeder, .project_box_heart {
  width: calc((100% - 80px)/3);
  margin-top: 5px;
  margin: 5px 20px 20px 10px;
}

.project_box_game {order:4;} 
.project_box_web {order:2;} 
.project_box_map {order:5;} 
.project_box_feeder {order:3;} 
.project_box_heart {order:6;}

}