.header {
    height:80px;
    background:#333;
    color:#CCC;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    z-index:10;
}
.logo {
    background: url("../../../assets/rr.png") no-repeat scroll 0% 0% transparent;
    height:80px;
    position:relative;
    left:200px;
    z-index:200;
}
.hero {
    background: url("../../../assets/header3.jpg") no-repeat scroll right top transparent;
    height:80px;
    position:relative;
    top:-80px;
    right:200px;
    z-index:0;
}
.header-mask {
    background: url("../../../assets/header-mask.png") no-repeat scroll right top transparent;
    height:80px;
    width:602px;
    position:absolute;
    top:0px;
    right:199px;
    z-index:150;
}
.main {
    position:relative;
    top:80px;
    left:200px;
    color:#333;
}
.menu {
    padding-top:10px;
    font-size: 18px;
    font-weight: 400;
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    color:#333;
}
.menu p {
    border-bottom:1px dotted black;
    margin:0px;
    padding-bottom:5px;
}
.menu p:first-of-type {
    border-top:1px dotted black;
}
.menu a {
    color:black;
    text-decoration:none;
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    font-size: 12px;
}
.menu h1{
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    font-size: 18px;
    }
.body-content {
    position:absolute;
    top:-26px;
    left:200px;
    width:100%;
    background:#FFF;
    padding-top:26px;
    padding-left:26px;
    padding-bottom:500px;
}
.body-content h1 {
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    font-size: 24px;
}
.body-content h2 {
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: 400;
}
.body-content p, .body-content li {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    width:800px;
}
body {
    background:#CCC;
    overflow-x:hidden;
}
.flex-container {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width:800px;
}
.flex-item {
  background:#CCC;
  border:1px solid #333;
  border-radius:10px;
  padding:10px;
  flex-basis:190px;
  flex-grow:1;
  margin:10px;
  justify-content:center;
  display:flex;
  align-items:center;
}

.media-container {
  float:right;
  margin-right:450px;
  margin-left:25px;
  clear:both;
}
.media-container img {
  width:400px;
}

.media-container video {
  width:400px;
  height:300px;
}

@media (max-width: 1250px) {
  .main {
    left:0;
  }
  .logo {
    left:100px;
  }
  .media-container{
    margin-right:250px;
  }
}

@media (max-width: 1050px) {
  .body-content p, .body-content li {
      width:600px;
  }
  .media-container img {
    width:250px;
  }

  .media-container video {
    width:250px;
    height:200px;
  }
}

@media (max-width: 865px) {
  .body-content p, .body-content li {
      width:400px;
  }
  .media-container {
    float:none;
    margin-right:auto;
    margin-left:auto;
  }
}