/*------------------------------------ 
    flex
The flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container.
In the following example, the first flex item will consume 2/4 of the free space, and the other two flex items will consume 1/4 of the free space each:

 /*------------------------------------ */   
    
    
 body {
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

header
 {
  display: flex;
  line-height: 75px;
  text-align: center; 
}
footer
 {
  display: flex;
  line-height: 75px;
  text-align: center; 
  margin-left: 20%;
}
.form-main {
    display:flex;
    justify-content: right;
    margin-top: 255px;
}
.f_class{
  margin-top: 5px;
  }
.form_input{
  height: 20px;
  margin-right: 10px;
}
.form_h {
  height: 5px;
}
section {
  -webkit-flex: 2 1 500px;
  -webkit-box-flex: 2;
  -ms-flex: 2 1 500px;
  flex: 2 1 500px;
  margin-right: 1%;
}
#left_content {
    display:flex;
    justify-content: center;
    background-color: rgb(247, 250, 250);
    width: 300px;
    margin-left: 20%;
    height: 300px;
}
#left_content_form {
  display:flex;
  justify-content: center;
  background-color: rgb(168, 221, 249);
  width: 450px;
  margin-left: 10%;
  height: 520px;
}
#right_content {
  display:flex;
  justify-content: center;
  background-color: rgb(246, 248, 248);
  width: 600px;
  margin-left: 20%;
  height: 300px;
}
#right_content_form {
  display:flex;
  justify-content: center;
  background-color: rgb(177, 179, 179);
  width: 450px;
  margin-left: 20%;
  height: 520px;
}
.container {
  display: flex;
  
}
.plo {
  background-color: darkseagreen;
  padding-left: 20%;
  border-radius: 5px;

}


.navigation {
  list-style: none;
  margin-left: 15%; 
  background: rgb(149, 15, 29);
  display: flex;
  justify-content: flex-start;
  width: 60%;
  
}

.navigation a {
  text-decoration: none;
  display: block;
  padding-right: 50px;
  color: white;
}



@media screen and (max-width: 500px) {
  .container {
    -webkit-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  section {
    margin-right: 0;
    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}

  
 
 
 
 


@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 375px) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}