html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box;}
blockquote, q {quotes: none;}
b, strong {font-weight:700;}


body {
  background: lightgrey;
}

.clear {
  clear:both;
}

h1 {
  color: white;
  font-family: 'Rubik', sans-serif;
  font-size: 2.1em;
  margin: 40px 0px;

}

h2 {
  color:white;
  font-weight: bold;
  font-size: 1.5em;
  font-family: 'Rubik', sans-serif;
  margin: 20px 0px;

}

.review-page {
  background: #EA5555;
  padding: 100px 0px;


}

.review-container {
  background: #EA5555;
  padding: 100px 10px;
  width:71%;
  margin: 0 auto;
}


.review-container p {
  color:white;
  font-family: 'Rubik', sans-serif;
  font-size: 1.1em;
  margin: 15px 0px;
  line-height: 1.5;
}

.review-container a {
  color:#A2195B;
  transition: .5s;

}

.review-container a:hover {
  transition: .7s;
  color: white;
}

.review-content {
  margin-bottom: 100px!important;
  background:white;
  width: 100%;
  padding: 10px;
  overflow:hidden;
  transition: .5s;

}

.flex-row {
  display:flex;
}

.flexbox {
  display: flex!important;
  width:100%;
   background:red;
}


.review-button {
  display: inline-block;
  width: 97%!important;
  background:#A2195B;
  padding: 20px;
  margin: 0px 10px 10px 20px;
  border-radius: 10px;
  transition: .5s;
}

.google {
  background:#A2195B;

}

.facebook {
  background: #438EE2;
}

.facebook .fa-facebook-square  {
  color:#0C54A4;

}

.facebook:hover .fa-facebook-square  {
  animation: none;
}


.column {
  width: 100%;
  margin-left: -10px;
}


.review-button img {
  width: 15%;
  flex-direction: row;
  transition: .5s;

}


a, a:hover{
  text-decoration: none;
}


 .review-button:hover p{
  text-decoration: underline;
  transition: .7s;
}

.scale {
  width: 65%;
  overflow:hidden;
}

.scale img {
  width: 100%;
  transition: .7s;
}


.review-content:hover .scale img {
  transform:scale(1.3);
  transition: .7s;
}


.review-button p {
  font-size: 1.5em;
}

.column-review {
  width: 50%;
  margin-left: -130px;
}



.column .fa-star {
  font-size: 1.5em!important;
  margin: -10px 0px 5px 0px;
  color: #FBBF37;
  display: inline;
  position: relative;
  transition: transform 0.3s ease-in-out;

}

.star-container {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.star {
  display: inline-block;
  margin-right: 5px;
  color: gold;
  transition: transform 0.3s ease-in-out;
}

.wave-animation {
  animation: mexican-wave 1.5s ease-in-out;
}

@keyframes mexican-wave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(0px); }
}

}}}}}

.column .star {
  font-size: 1.5em!important;
  margin: -10px 0px 5px 0px;
  color: #FBBF37;
  display: inline;
  position: relative;
  transition: transform 0.3s ease-in-out;

}

.review-content:hover .column.fa-star {
  transition: transform 0.3s ease-in-out;

}



.review-button i {
  color:white;
  font-size: 5em!important;
  font-weight: bold;
  margin: 5px 0px 5px 10px;

}

.review-button:hover i {
  animation: slide 1s ease-in-out infinite;
}

.review-button:hover .facebook i {
  animation:none;
}

.review-button:hover {
  background-color: #69b1ca;
  transition: .7s;
}

@keyframes slide {
  0%,
  100% {    transform: translate(0, 0);  }
  50% {    transform: translate(6px, 0);  }
}

@media only screen and (max-width: 100em){
  .review-container {
    width: 80%;
  }


  .review-button {
    display: inline-block;
    width: 96%!important;
  }

  .review-button p {
    font-size:1.2em;
  }

  .review-button img {
    width: 20%;
  }

  .column-review {
    margin-left: -30px;
  }

  .scale {
    width: 90%!important;
    overflow:hidden;
  }

  
  

}


@media only screen and (max-width: 80em){
  .review-container {
    width: 80%;
  }


  .review-button {
    display: inline-block;
    width: 96%!important;
  }

  .review-button p {
    font-size:1em;
  }

  .review-button img {
    width: 20%;
  }

  .column-review {
    margin-left: -30px;
  }

  .scale {
    width: 90%!important;
    overflow:hidden;
  }

  
  

}

@media only screen and (max-width: 75em){
  
  .review-container {
    width: 75%;
    
  }

  .review-button img {
    width: 20%;
  }

  .review-button p {
    font-size:0.7em;
  }

  .column .fa-star {
    font-size: 1em!important;

  }

  .review-button {
    padding: 10px;
  }

  .review-button i {
    font-size: 3em!important;
  
  }
}


@media only screen and (max-width: 59em){
.review-container {
  width: 96%;
}

.flex-row {
  display:block;
}

.flexbox {
  display:block;
}

.column {
  margin-left: 0;
}

.review-content img {
  width: 100%;
  margin: 10px 0px;
}

.review-button img {
  width: 17%;
}

.review-button {
  width: 100%!important;
  margin: 0px 0px 10px 0px!important;

}

.column-review{
  margin-left: 20px;
  width:100%;
}

.scale {
  width: 100%!important;
  overflow:hidden!important;
  margin-bottom: 10px;
}

.scale img {
  width: 100%!important;
  transition: .7s;
}

.review-content:hover .scale img {
  transform:scale(1.3);
  transition: .7s;
  overflow: hidden;
}

.review-button p {
  font-size:1em;
}

.column .fa-star {
  font-size: 1.5em!important;

}

.review-button {
  padding: 20px;
}

.review-button i {
  font-size: 4em!important;

}
}

@media only screen and (max-width: 39em) {
  
}
