*

.row {
  display: flex;  
}
.column {
  flex: 100%;
  padding: 50px;
  text-align: center;
}
@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  text-align: center;
}

p {
  text-decoration: none;
  color: black;
  font: 22px/32px "Roboto, Arial", Sans-Serif;
}

h1 {
  text-decoration: none;
  color: black;
  font: 30px/40px "Roboto, Arial", Sans-Serif;
}

h4 {
  text-decoration: none;
  color: black;
  font: 20px/30px "Roboto, Arial", Sans-Serif;
}

/* TOP MENU OPTIONS */
.navigation {
  list-style-type: none;
  margin: -8; 
  padding: 0;
  overflow: hidden;
  background: #1C1C1C;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: #fff;
  font: 700 14px/24px "Roboto, Arial", Sans-Serif;
}

.navigation a:hover{
  color: #FACC2E;
}

@media all and (max-width: 800px) {
.navigation {
    justify-content: space-around;
  }
}
@media all and (max-width: 600px) {
.navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
  }
.navigation a { 
    text-align: center; 
    padding: 15px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
  }

}

.navigation img {
  height:2em;
} 

/* CONTACT FORM */
html{    background:url("../jcor_images/jcor_head_6.jpg") no-repeat;

  background-size: auto;
  height:100%;
}
*::-webkit-input-placeholder {
  color:#000;
}
#feedback-page{
  text-align:center;

}

#form-main{
  width:100%;
  float:left;
  padding-top:0px;
  font-family: Roboto, Arial, sans-serif;
}

#form-div {
  background: transparent;
  padding-left:35px;
  padding-right:35px;
  padding-top:35px;
  padding-bottom:35px;
  width: 450px;
  float: left;
  left: 50%;
  position: absolute;
  margin-top:30px;
  margin-left: -260px;
}

.feedback-input {
  color:#000;
  font-family: Roboto, Arial, sans-serif;
  font-weight:300;
  font-size: 14px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fff;
  padding: 13px 13px 13px 13px;
  margin-bottom: 10px;
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 0px solid transparent;
  border-bottom: 1px solid #000;
}

.feedback-input:focus{
  background: #fff;
  box-shadow: 0;
  color: #000;
  outline: none;
  padding: 13px 13px 13px 13px;
}

.focused{
  color:#000;
  border:#30aed6 solid 2px;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
  background-color: lightgrey;
}

#button-blue{
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  float:left;
  width: 100%;
  border: 0px solid transparent;
  cursor:pointer;
  background-color: #FACC2E;
  color:white;
  font-size:18px;
  padding-top:22px;
  padding-bottom:22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:300;
}

#button-blue:hover{
  background-color: #fff;
  color: #000;
  border: 3px solid #1C1C1C;
}
  
.submit:hover {
  color: #1C1C1C;
}
  
.ease {
  width: 0px;
  height: 74px;
  background-color: #1C1C1C;
  -webkit-transition: 1s ease;
  -moz-transition: 1s ease;
  -o-transition: 1s ease;
  -ms-transition: 1s ease;
  transition: 1s ease;
}

.submit:hover .ease{
  width:100%;
  background-color: #FACC2E;
}

@media only screen and (max-width: 580px) {
  #form-div{
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}



/* FOOTER */
footer {
  color: #fff;
  font: 700 14px/24px "Roboto, Arial", Sans-Serif;
  background: #1C1C1C;
  bottom: 0;
  left: 0;
  padding: 15px 0;
  position: fixed;
  right: 0;
  text-align: center;
}
/* COLORS:
939393 - GREY
FACC2E - ORANGE
946338 - BROWN
2E2E2E - LIGHT BLACK
1C1C1C - MIDDLE BLACK
000000 - BLACK BLACK
 */