header, section {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #2C3E50;
  min-width: 1024px; }

.logo {
  width: 70%;
  margin: 50px auto; }
  .logo img {
    width: 30%; }

#container {
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  font-family: "Open Sans", sans-serif; }

/* Sidebar: */
.navbar {
  background: #2C3E50;
  color: #fff;
  flex: 1;
  -ms-flex: 0 100px;
  -webkit-box-flex: 0;
  -ms-box-flex: 0;
  box-flex: 0;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  padding: 0 auto;
  min-height: 100vh; }
  .navbar header {
    text-align: center; }

.name {
  font-family: "Open Sans", sans-serif;
  font-size: 2em;
  line-height: 1em;
  display: block; }

.title {
  font-size: 1.3em;
  margin: 15%; }

.credentials, .main, .social {
  list-style: none;
  color: #fff; }

.credentials {
  margin-left: 20px; }
  .credentials li {
    width: 80%;
    line-height: 1em;
    font-size: 1.01em;
    margin-bottom: 10px; }

.main {
  margin-top: 50px; }
  .main a {
    color: #fff;
    display: block;
    background-color: #FC4349;
    width: 180px;
    border: #FC4349 3px solid;
    margin-bottom: 15px;
    padding: 8px;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center; }
  .main a:hover, .main .active {
    border: #FC4349 3px solid;
    background: none;
    color: red;
    font-weight: regular; }

.social li {
  display: inline; }

/*content area*/
.content {
  flex: 3;
  -ms-flex: 3;
  -webkit-box-flex: 3;
  -ms-box-flex: 3;
  box-flex: 3;
  background: #fff;
  padding: 30px 5% 30px 5%; }

.expertise, .experiences {
  text-align: center; }
  .expertise ul, .experiences ul {
    list-style: none;
    margin: 40px;
    padding: 0; }
    .expertise ul li, .experiences ul li {
      display: inline-block;
      border-right: #6DBCDB 1px solid;
      text-transform: uppercase;
      padding: 0 20px; }
      .expertise ul li:last-child, .experiences ul li:last-child {
        border-right: none; }
  .expertise h1, .experiences h1 {
    text-transform: uppercase;
    color: #FC4349;
    font-size: 30px;
    font-weight: normal;
    margin: 10px 0 0 0;
    padding: 0; }

.experiences {
  width: 90%; }
  .experiences header {
    border-bottom: 1px solid #6DBCDB;
    margin-bottom: 30px; }
  .experiences img {
    width: 80%;
    margin: auto;
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%); }
  .experiences h1 {
    text-align: center;
    text-transform: uppercase;
    padding-bottom: 10px;
    width: 80%;
    margin: auto; }
  .experiences section h2 {
    text-transform: uppercase;
    text-align: left;
    font-weight: normal;
    font-size: 24px; }
  .experiences .tagline {
    color: #6DBCDB;
    line-height: 1em; }

.explanation {
  line-height: 1.3em;
  text-align: left;
  margin-bottom: 60px; }
  .explanation a {
    color: #FC4349;
    border: 2px solid #FC4349;
    padding: 5px;
    display: block;
    width: 300px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center; }

.links {
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right; }
  .links .na {
    color: #2C3E50;
    border: 2px solid #2C3E50; }

label {
  color: #6DBCDB;
  font-size: 14px;
  text-transform: uppercase; }

.contact {
  border: 1px #2C3E50 solid;
  width: 80%;
  margin: auto;
  padding-bottom: 50px; }
  .contact header {
    background: #6DBCDB;
    text-align: center;
    margin-bottom: 40px; }
  .contact h1 {
    color: #fff;
    margin: 0;
    padding: 10px 0;
    font-weight: normal;
    text-transform: uppercase; }
  .contact div {
    width: 90%;
    margin: 10px auto; }

input, textarea {
  width: 99%;
  border: 1px solid #2C3E50;
  padding-left: 1%;
  font-size: 12px;
  color: #2C3E50; }

input[type=text] {
  height: 30px; }

textarea {
  height: 100px; }

input[type=submit] {
  color: #fff;
  background: #FC4349;
  border: none;
  width: 80%;
  padding: 1.5% 0;
  margin: 20px auto;
  display: block;
  font-size: 16px;
  text-transform: uppercase; }

.projects {
  margin: 0;
  padding: 0;
  flex: 3;
  -ms-flex: 3;
  -webkit-box-flex: 3;
  -ms-box-flex: 3;
  box-flex: 3;
  background: #fff; }
  .projects div {
    border-bottom: 1px #2C3E50 solid;
    width: 90%;
    margin: 0px auto 20px auto; }
  .projects ul {
    list-style: none;
    color: #2C3E50; }
  .projects em {
    color: #FC4349; }
  .projects a {
    color: #6DBCDB;
    border: 2px solid #6DBCDB;
    padding: 5px;
    margin-top: 10px;
    display: block;
    width: 200px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center; }
  .projects header {
    background: #FC4349;
    width: 100%;
    text-transform: uppercase;
    text-align: right; }
    .projects header h1 {
      font-size: 24px;
      font-weight: normal;
      color: #fff;
      padding-right: 40px; }