@font-face {
    font-family: "Roboto";
    font-weight: 200;
    font-style: italic;
    src: url("Roboto-ThinItalic-webfont.eot");
    src: url("Roboto-ThinItalic-webfont.eot?#iefix") format("embedded-opentype"), url("Roboto-ThinItalic-webfont.woff") format("woff"), url("Roboto-ThinItalic-webfont.ttf") format("truetype");
}
/* chakra-petch-regular - latin */
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/chakra-petch-v9-latin-regular.eot"); /* IE9 Compat Modes */
    src: local(""), url("../fonts/chakra-petch-v9-latin-regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("../fonts/chakra-petch-v9-latin-regular.woff2") format("woff2"),
        /* Super Modern Browsers */ url("../fonts/chakra-petch-v9-latin-regular.woff") format("woff"), /* Modern Browsers */ url("../fonts/chakra-petch-v9-latin-regular.ttf") format("truetype"),
        /* Safari, Android, iOS */ url("../fonts/chakra-petch-v9-latin-regular.svg#ChakraPetch") format("svg"); /* Legacy iOS */
}
h1 {
    font-family: "Chakra Petch";
    font-size: 38px;
    color: white;
}
h2 {
    font-family: "Chakra Petch";
    font-size: 34px;
    color: white;
}
h3 {
    font-family: "Chakra Petch";
    font-size: 28px;
    color: white;
}
.center {
    text-align: center;
}
body {
    background-color: #392d45;
    color: white;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
}
.btn-green {
    background-color: #00ff63;
    padding: 15px;
    font-size: 20px;
    font-family: "Chakra Petch";
    font-size: 22px;
    font-weight: bold;
}
p {
    font-family: "Roboto", sans-serif;
}
.padding {
    padding: 15px;
}
.img-responsive {
    width: 100%;
    height: auto;
}
.row {
  margin: -7px;
}
}.img-responsive {
  width: 100%;
  height: auto;
}
.flex {
  display: flex;
  justify-content: center;
  
}
.accent {
  background-color: #261e2f;
  margin-top: -8px;
  margin-right: -6px;
  margin-left: -6px;
  margin-bottom: 150px;
}
.active-image {
  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;
}
.inactive-image {
  opacity: 0.4;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.container:hover .active-image {
  opacity: 0.4;
}
.container:hover .inactive-image {
  opacity: 0.2;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  color: white;
  font-size: 16px;
}
.container {
  position: relative;
}
.flex {
  display: flex;
  justify-content: center;
}
@media (max-width: 600px) {
.flex {
flex-direction: column;
}
h1 {
    font-family: "Chakra Petch";
    font-size: 32px;
    color: white;
}
h2 {
    font-family: "Chakra Petch";
    font-size: 26px;
    color: white;
}
h3 {
    font-family: "Chakra Petch";
    font-size: 20px;
    color: white;
}
.accent {
    margin-bottom: 80px;
}
}