.wraped{
  width: 1080px;
  }
  .main{
  width: 1080px;
  }
  .logo{
  
/* height: 120px; */
  
width: auto;
  
margin: 0px auto 0px;
  }
  .logo p{text-align: center;font-size: 52px;line-height: 0;padding: 0px;margin: 0;display: flex;justify-content: center;font-family: cursive;}
  .pro17, .pro17, .pro16, .pro15, .pro14, .pro13, .pro11, .pro12, .pro1, .pro2, .pro3, .pro4, .pro5, .pro6, .pro7, .pro8 {
  height: 290px;
  width: 313px;
  float: left;
  margin: 40px 20px;
  position: relative;
  }
  
  .pro17:hover, .pro17:hover, .pro16:hover, .pro15:hover, .pro14:hover, .pro1:hover, .pro2:hover, .pro3:hover, .pro4:hover, .pro5:hover, .pro6:hover, .pro7:hover, .pro8:hover, .pro11:hover, .pro12:hover, .pro13:hover{
  opacity: .8;
  }
  .title {
  position: absolute;
  width: 185px;
  height: auto;
  bottom: 0;
  background: #071850;
  }
  .title a{
  text-align: center;
  display: inline-block;
  text-decoration: none;
  line-height: normal;
  padding: 4px;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  }
  
  .info-text {
  width: 100%;
  text-align: center;
  }
  .info-text img {width: 74%;opacity: .4;}
  @media screen and (min-width: 375px) {
  .main{
  width: 100%;
  /* border: 1px solid; */
  margin: 0 auto;
  text-align: center;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  h3{
      font-size: 15vw;
  }
  
  }
  .title{
  width: 100%;
  /* left: 50%; */
  /* right: 50%; */
  /* margin-left: -78px; */
  margin: 0px 0px 0px 0px;
  background: linear-gradient(to right, black, white);
  background-color: black; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #0e0b0b, #605e5e);
  }
  .wraped {
  height: auto;
  width: 95%;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  }
  .pro18, .pro17, .pro16, .pro15, .pro14, .pro13, .pro11, .pro12, .pro1, .pro2, .pro3, .pro4, .pro5, .pro6, .pro7, .pro8{
  height: auto;
  width: 46%;
  margin: 6px;
  position: relative;
  /* border: 1px solid #181616; */
  background: #bfbfbf;
  border-radius: 0px;
  }
  .pro18 img, .pro17 img, .pro16 img, .pro15 img, .pro14 img, .pro13 img, .pro12 img, .pro11 img, .pro1 img, .pro2 img, .pro3 img, .pro4 img, .pro5 img, .pro6 img, .pro7 img, .pro8 img{
  height: 150px;
  width: 100%;
  border-radius: 0px;
  }
  
  }
  @media screen and (min-width: 768px) {
  .main{
  width: 330px;
  /* border: 1px solid; */
  }
  .title{
  width: 93%;
  }
  .title a{
  line-height: 22px;
  padding: 8px;
  }
  .wraped {
  height: auto;
  width: 768px;
  margin: 0 auto;
  }
  .main {
  width: 630px;
  /* border: 1px solid; */
  margin: 0 auto;
  }
  .pro18, .pro17, .pro16, .pro15, .pro14, .pro13, .pro12, .pro11, .pro1, .pro2, .pro3, .pro4, .pro5, .pro6, .pro7, .pro8{
  
  height: 190px;
  width: 185px;
  float: left;
  margin: 10px;
  position: relative;
  }
  }
  @media screen and (min-width: 1024px) {
  .wraped {
  height: auto;
  width: 900px;
  margin: 0 auto;
  } 
  .main {
  width: 925px;
  /* border: 1px solid; */
  margin: 0 auto;
  float: left;
  } 
  .pro18, .pro17, .pro16, .pro15, .pro14, .pro13, .pro12, .pro11, .pro1, .pro2, .pro3, .pro4, .pro5, .pro6, .pro7, .pro8{
  
  height: 300px;
  width: 285px;
  float: left;
  margin: 10px;
  position: relative;
  }       
  .pro18 img, .pro17 img, .pro16 img, .pro15 img, .pro14 img, .pro13 img, .pro12 img, .pro11 img, .pro1 img, .pro2 img, .pro3 img, .pro4 img, .pro5 img, .pro6 img, .pro7 img, .pro8 img{
  height: 300px;
  width: 285px;
  }  
  .title{
  width: 95%;
  }   
  .title a{
  font-size: 15px;
  padding: 12px;
  line-height: 30px;
  }                   
  }
  
  @import url('https://fonts.googleapis.com/css2?family=Wendy+One&display=swap');
  
  body {
    font-family: 'Wendy One', sans-serif;
    background: #112978;
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    flex-flow: column;
  }
  
  .box {
    position: relative;
    /* top: 35px; */
    left: 0;
    transform: translate(0%,0%);
    text-align: center;
    border-bottom: 1px solid #ccc;
    margin-top: 35px;
    margin-bottom: 35px;
  }
  
  h3 {
    font-size: 12vw;
    white-space: nowrap;
    overflow: hidden;
    line-height: normal;
    margin-top: 0px;
    margin-bottom: 25px;
    font-family: sans-serif;
    /* font-size: 6rem; */
    background: linear-gradient(to right, #036edb, #765ad1, #6230BD, #c937d1, #f1834e, #ff3300, #ff3300, #ff3300, #ff3300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* letter-spacing: -3px; */
  }
  
  h3:hover {
    animation: glitch .3s linear infinite;
    cursor: pointer;
  }
  .info-text p {
    color: #8f8f8f;
    font-size: 9px;
    letter-spacing: 2px;
    line-height: 12px;
}