body {
    border-top:15px solid black
}


/*flexbox*/
@import "compass/css3";
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  text-align: center;
    position:relative;
    margin-top:80px;
  .slideshow {order:1;}
  .header {order:2;}
  .wrapco {order:3;}
  .wrap {order:4;}
  width:100%;
  margin:auto;
}
.header {
  width:100%;
  font-size:30px;
  letter-spacing:3px;
}
.header p{
  letter-spacing:0px;
  font-size:24px;
  font-weight:normal;
  font-style:italic;
    width:90%;
    margin:auto;
}
.slideshow {
  width:100%;
  padding:0 10px 20px 10px;
}
.slideshow div img {
  max-width:800px;
  width:95%;
    border:15px solid black
}
.direct, .mem {
  font-size:24px;
  margin-top:10px;
  width:100%;
  border-bottom:solid black 2px;
}
.wrapco {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  margin:0 auto 20px auto;
  justify-content:center;
  align-content: center;
  width:100%;
  .direct {order:1;width:100%;}
  .co {order:2;}
  .mem {order:3;}
  .wrap {order:4;}
}
.wrapco .co {
  margin:20px;
  font-weight:normal;
}
.co img {border:solid black 5px;}
@media all and (max-width:800px) {
  .wrapco {-webkit-flex-flow: column wrap;
  flex-flow: column wrap;}
    .wrapco .co {width:75%;align-self: center}
    .co img {width:90%;margin-top:20px;}
}
@media all and (min-width:799px) {
  .wrapco {-webkit-flex-flow: row wrap;
  flex-flow: row wrap;}
    .wrapco .co {width:42%;max-width:600px;}
    .co img {width:90%;margin-top:20px;}
}
.co, .head {
  margin:10px;
}
.wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  text-align: center;
  position:relative;
  justify-content:center;
  align-content:middle;
  width:100%;
}
.wrap .head img {
  margin-top:10px;
    width:90%;
    border:solid black 5px;
}
#name {
  font-size:20px;
  font-weight:bold;
}
@media all and (max-width:619px) {
    .wrap {-webkit-flex-flow: column wrap;
  flex-flow: column wrap;}
    .wrap .head {width:80%;align-self:center;}
    .slideshow {padding:0px;}
}
@media all and (min-width:620px) {
    .wrap {-webkit-flex-flow: row wrap;
  flex-flow: row wrap;width:90%;margin:auto;}
    .wrap .head {align-self: center;width:26%;min-width:250px;}
}
@media all and (max-width:300px) {
    .head {font-size: 13px;}
}