@charset "UTF-8";
/* CSS Document */
* {
  padding: 0;
  margin: 0;
  font-family: "Monserrat", serif;
}
.body {
  width: 100%;
  top: 0px;
  left: 0px;
}
div.container {
  /* position: absolute;*/
  width: 100%;
  padding: 0 0 100px 0;
  margin: 0;
}
div.quote {
  position: relative;
  margin: 18% auto;
  padding: 10px;
  width: 30%;
  min-width: 475px;
  background-color: aliceblue;
}
blockquote {
  margin: 10px;
  padding-top: 0.5em;
  padding-right: 20px;
  padding-left: 40px;
  padding-bottom: 15px;
  quotes: "\201C""\201C""\2017""\2019";
}
blockquote:before {
  color: #333;
  content: open-quote;
  font-size: 8em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.3em;
}
blockquote a {
  display: inline;
  font-size: 250%;
  font-style: italic;
  line-height: 1.2em;
}
.arrow {
  font-size: 4em;
  text-decoration: none;
  color: #fff;
}
a {
text-decoration: none;
color: black;
}
/**/
/* Colours*/
/**/
/*body background*/
.body1 {
  background-color: rgba(100, 150, 250, 0.5);
}
.body2 {
  background-color: rgba(150, 250, 100, 0.5);
}
.body3 {
  background-color: rgba(150, 100, 150, 0.5);
}
.body4 {
  background-color: rgba(250, 150, 100, 0.5);
}
/*blockquote border*/
.body1 blockquote {
  border-left: 5px solid rgba(100, 150, 250, 1.0);
}
.body2 blockquote {
  border-left: 5px solid rgba(150, 250, 100, 1.0);
}
.body3 blockquote {
  border-left: 5px solid rgba(150, 100, 150, 1.0);
}
.body4 blockquote {
  border-left: 5px solid rgba(250, 150, 100, 1.0);
}
/*arrow*/
.arrcol1 {
  color: rgba(150, 250, 100, 1.0);
}
.arrcol2 {
  color: rgba(150, 100, 150, 1.0);
}
.arrcol3 {
  color: rgba(250, 150, 100, 1.0);
}
.arrcol4 {
  color: rgba(100, 150, 250, 1.0);
}
.arrow:hover {
  color: #333;
  transition: 1s;
}
/**/
/*Media Queries*/
/**/
/*Tablet*/
@media screen and (min-width : 768px) and (max-width : 992px) {
  div.quote {
    margin: 125px auto;
    min-width: 310px;
  }
  blockquote:before {
    font-size: 4em;
    margin-right: 0.18em;
  }
  blockquote p {
    font-size: 170%;
  }
  .arrow {
    font-size: 3em;
  }
}
/*Mobile*/
@media screen and (min-width:200px) and (max-width:767px) {
  div.quote {
    margin: 100px auto;
    padding: 5px;
    min-width: 300px;
  }
  blockquote:before {
    font-size: 2.5em;
    margin-right: 0.12em;
  }
  blockquote p {
    font-size: 150%;
  }
  .arrow {
    font-size: 2em;
  }