@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
body {
  float: left;
  height: 100vh;
  width: 100%; }

form {
  width: 100%; }

.form-control {
  border-radius: 0; }

.control-label {
  color: #c5c5c5;
  font-weight: 400; }

.six {
  width: 50%;
  float: left;
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; }
  .six .align {
    position: relative;
    z-index: 5;
    text-align: center;
    width: 100%;
    float: left; }
    .six .align img {
      max-width: 350px;
      width: 100%;
      height: auto; }
      .six .align img.done {
        max-width: 250px; }
    .six .align h3 {
      color: #fff;
      font-size: 20px;
      font-weight: 200;
      text-transform: uppercase; }

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  float: left;
  width: 100%;
  height: 100%;
  position: relative; }

.btn-success {
  border-radius: 0;
  background: #6544c6;
  /* Old browsers */
  background: -moz-linear-gradient(left, #6544c6 0%, #0971ce 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #6544c6 0%, #0971ce 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #6544c6 0%, #0971ce 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6544c6', endColorstr='#0971ce',GradientType=0 );
  /* IE6-9 */
  border: 0;
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  text-transform: uppercase;
  font-size: 20px; }
  .btn-success:hover {
    background: #0971ce !important; }

.overflow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.9;
  background: #121212; }

.image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }

.fadein {
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s; }

fieldset, label {
  margin: 0;
  padding: 0; }

h1 {
  font-size: 1.5em;
  margin: 10px; }

/****** Style Star Rating Widget *****/
.rating {
  border: none;
  float: left; }

.rating > input {
  display: none; }

.rating > label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005"; }

.rating > .half:before {
  content: "\f089";
  position: absolute; }

.rating > label {
  color: #ddd;
  float: right; }

/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #6544c6; }

/* hover previous stars in list */
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #8873c6; }

article.more {
  position: absolute;
  top: 50px;
  width: 88%;
  z-index: 6;
  max-height: 50vh;
  overflow-y: auto; }
  article.more div {
    width: 100%;
    float: left;
    margin-bottom: 20px;
    background: #fff;
    position: relative; }
    article.more div img {
      width: 100%; }
article.comment {
  position: absolute;
  bottom: 50px;
  width: 88%;
  z-index: 6;
  background: #fff;
  padding: 20px; }
  article.comment small {
    color: #6544c6;
    font-size: 18px; }
  article.comment h3 {
    margin: 0;
    color: #121212;
    font-weight: 500; }
  article.comment textarea {
    width: 100%;
    resize: none; }

.barre {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  margin: 0 20%;
  z-index: 99; }
  .barre span {
    display: inline-block;
    width: 33.33333%;
    float: left;
    height: 10px; }
    .barre span:nth-child(1) {
      background: #FDD100; }
    .barre span:nth-child(2) {
      background: #0071CE; }
    .barre span:nth-child(3) {
      background: #F52433; }

/*-------------------------ANIMATION----------------*/
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@media only screen and (max-width: 1400px), only screen and (max-device-width: 1400px) {
  .form {
    padding: 50px 20px !important; } }
@media only screen and (max-width: 1200px), only screen and (max-device-width: 1200px) {
  .wrap {
    display: flex;
    flex-flow: row wrap; }
    .wrap .six {
      width: 100%;
      position: relative !important; }
    .wrap .second {
      order: 2;
      height: auto !important; }
      .wrap .second .more {
        float: left;
        position: relative;
        top: auto;
        max-height: 100%;
        margin: 40px 0; }
    .wrap .first {
      order: 1; }

  .comment {
    display: none; }

  .form {
    padding: 50px 100px !important; } }
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
  .form {
    padding: 50px 20px !important; } }

/*# sourceMappingURL=styles.css.map */