@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
  }
  footer p {
    font-size: 0.8em;
  }
  .row5 p {
    font-size: 1.1em;
  }
  /* footer a img {width: 100px;} */
  .forc h3 {
    text-align: center;
  }
  .xd {
    background: none;
  }
  .links img {
    width: 50%;
  }
}
@media screen and (max-width: 640px) {
  .arrow {
    width: 40%;
    padding: 15px 0px;
  }
  footer ul li a {
    padding: 20px 5px;
  }
  .links img {
    width: 30%;
  }
  .rid img {
    width: 50%;
  }
  .links h3,
  .links p,
  .res,
  .jo {
    text-align: center;
  }
  .like {
    width: 100%;
    text-align: center;
  }
  .yo img {
    width: 70%;
  }
  .theory h2,
  .theme h2 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .color h2,
  .theory h2,
  .theme h2 {
    font-size: 2.2em;
  }
}
@media screen and (max-width: 480px) {
  .row1 h2 {
    font-size: 2.1em;
  }
  .head {
    padding: 50px 0px;
  }
  .head h2 {
    font-size: 3em;
  }
}
@media screen and (max-width: 360px) {
  .logo {
    width: 130px;
  }
  .row1 h2 {
    font-size: 1.8em;
  }
  .row3-col h3,
  .row4-col h2,
  .row4-col h3,
  .row5 h2,
  .row1-col h2,
  .row2 h2,
  .row1-col h2 span {
    font-size: 1.6em;
  }
  .row5 p {
    font-size: 1em;
  }
  .row2 h2 {
    font-size: 1.5em;
  }
  .row5 .bt4 {
    margin-top: 12px;
  }
  .cara h3 {
    font-size: 1.8em;
  }
  .color h2,
  .theory h2,
  .theme h2,
  .scheme h2,
  .visual h2 {
    font-size: 2em;
  }
  .details h2 {
    font-size: 2.4em;
  }
  .details p {
    font-size: 0.8em;
  }
}
@media screen and (max-width: 320px) {
  .logo {
    width: 110px;
  }
  .row1 h2,
  .color h2,
  .theory h2,
  .theme h2 {
    font-size: 1.6em;
  }
  .row3-col h3,
  .row4-col h2,
  .row4-col h3,
  .row5 h2,
  .row1-col h2,
  .row2 h2,
  .row1-col h2 span {
    font-size: 1.5em;
  }
  .row1-col h3,
  .row2 h2 {
    font-size: 1.2em;
  }
  .cara h3 {
    font-size: 1.5em;
  }
  .pro h3 {
    font-size: 2em;
  }
}