* {
  margin: 0;
  padding: 0;
 
}

.grid-container {
  /*height: 626px;*/
  display: grid;
  grid-template-areas: 
          'item1 item1 item2'
          'item3 item4 item2';
  grid-template-columns: 290px 40% 1fr;
  grid-template-rows: 315px 300px;
  grid-gap: 5px;
  padding: 5px;
  background-color: #E3E2E3;
  justify-content: center;
  
}

.grid-items {
  
  background-color: #FFFFFF;
  border-radius: 10px;             
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
  
}

.item3 {
  grid-area: item3;
  
}

.item4 {
  grid-area: item4;

}

/*---------กล่องที่1--คาดประมาณผู้ติดเชื้อเอชไอวี--------*/

  .header-card{
    border-radius: 10px;
    position:relative;
    background: linear-gradient(60deg, #0370B7, #07D1BF 50%, #60F4A0 86%);
    color:white;
    height: 31%;
    width: 100%;
  } 
  .inner-header {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 5px;
  }
  
  .flex { /*Flexbox for containers*/
    display: flex;
    align-items: center;
    text-align: center;
  }
  
  .waves {
    position:relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 20px;
    max-height: 60px;
  }
  
  /*-------------endwave---------------------*/
  .text-item1 {
      width: 20%;
      height: 35px;
      margin-left: 20px;
  }
  .text-item1 h6 {
      color: #FFFFFF;
      font-size: 22px;
      padding: 8px;
      text-align: center;
      text-shadow:  1px 1px 2px #444343;
  }
  .text2-item1 {
      background: linear-gradient(-150deg, rgb(80, 218, 195) 0%, rgb(64, 163, 216) 65%);
      box-shadow:  5px 5px 5px #ededed;
      border-radius: 20px;
      width: 35%;
      height: auto;
      position: relative;
      margin: auto;
      margin-top: -25px;
  }
  .text2-item1 h6{
      color: #FFFFFF;
      font-size: 14.5px;
      padding: 6px;
      text-align: center;
      text-shadow:  1px 1px 2px #444343;
  }
 
  .text-source p{
      font-size: 10px;
      text-align: center;
      margin-top: 5px;
  }
  
  /*................................card...........................................*/
  .grid-boxx {
      display: grid;
      grid-template-areas: 
              'box-item1 box-item2 box-item3 box-item4';
      grid-template-columns: 24% 24% 24% 24%;
      grid-template-rows: 90%;
      grid-gap: 5px;
      padding: 5px;
      justify-content: center;
      margin-top: 40px;
  }
  .box-item1 {
      grid-area: box-item1;
      background: linear-gradient(180deg, #07D1BF 0%, #4889BF 80%);
      box-shadow:  5px 5px 5px #e4e0e0;
      border-radius: 5px;
  }
  .box-item2 {
      grid-area: box-item2;
      background: linear-gradient(180deg, #07D1BF 0%, #4889BF 80%);
      box-shadow:  5px 5px 5px #e4e0e0;
      border-radius: 5px;
  }
  .box-item3 {
      grid-area: box-item3;
      background: linear-gradient(180deg, #07D1BF 0%, #4889BF 80%);
      box-shadow:  5px 5px 5px #e4e0e0;
      border-radius: 5px;
    
  }
  .box-item4 {
      grid-area: box-item4;
      background: linear-gradient(180deg, #07D1BF 0%, #4889BF 80%);
      box-shadow:  5px 5px 5px #e4e0e0;
      border-radius: 5px;
      
  }
/*********************icon*************************/
    .bordericon {
    
     /* margin-left: 30%;*/
     
      margin-top: -30px;
      margin-left: 33.5%;
      margin-bottom: 5px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow:  -1px -1px 8px #dedede;
      position: relative;
    }
   
   
    .buttom-page {
      width: 70%;
      height: 25px;
      background: #FFFFFF;
      box-shadow:  1px 1px 2px #dedede;
      margin: 0 auto;
      text-align: center;
      padding: 2px;
      border-radius: 20px;
    }
    .box-item1 h6{
      font-size: 13.5px;
      color: #FFFFFF;
      font-weight: 500;
      text-align: center;
      text-shadow:  1px 1px 2px #444343;
    }

    .box-item1 p{
      font-size: 10px;
      color: #FFFFFF;
      text-align: center;
      margin-top: 8px;
    }
    .box-item2 h6{
      font-size: 13.5px;
      color: #FFFFFF;
      font-weight: 500;
      text-align: center;
      text-shadow:  1px 1px 2px #444343;
    }

    .box-item2 p{
      font-size: 10px;
      color: #FFFFFF;
      text-align: center;
      margin-top: 8px;
    }
    .box-item3 h6{
      font-size: 13.5px;
      color: #FFFFFF;
      font-weight: 500;
      text-align: center;
      text-shadow:  1px 1px 2px #444343;

    }

    .box-item3 p{
      font-size: 10px;
      color: #FFFFFF;
      text-align: center;
      margin-top: 8px;
    }
    .box-item4 h6{
      font-size: 13.5px;
      color: #FFFFFF;
      font-weight: 500;
      text-align: center;
      text-shadow:  1px 1px 2px #444343;
    }

    .box-item4 p{
      font-size: 10px;
      color: #FFFFFF;
      text-align: center;
      margin-top: 8px;
    }
    

    .count-number {
      font-size: 14px;
      color: #696969;
      font-weight: 600;
    }
    .text-human {
      font-size: 13px;
      color: #858181;
      font-weight: 400;
    }

    /* Animation wave1*/
    
    .parallax > use {
      animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
    }
    .parallax > use:nth-child(1) {
      animation-delay: -2s;
      animation-duration: 7s;
    }
    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
    }
    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
    }
    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
    }
    @keyframes move-forever {
      0% {
       transform: translate3d(-90px,0,0);
      }
      100% { 
        transform: translate3d(85px,0,0);
      }
    }
    /*Shrinking for mobile*/
    @media (max-width: 768px) {
      .waves {
        height:50px;
        min-height:40px;
      }
      .content {
        height:20vh;
      }
      
    }
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .boxx-map{
     display: grid;
     justify-content: center;
    }
     #map_container {
      padding: 5px;
    }

    .buttom-item2 h6{
      background:#ECE9E9;
      width: 155px;
      height: 80px;
      margin-top: -585px;
      margin-left: 46%;
      font-size: 12px;
      position: relative;
      border-radius: 10px;
      text-align: center;
      padding: 8px;
      box-shadow:  1px 1px 2px #dedede;
    }
    .buttom-item2 span{
      color: #E82E2E;
      font-size: 18px;
      font-weight: 600;
    }
   
    .text-map {
      margin-top: 193px;
      margin-left: 41%;
    }
    
    .text-map .s1{
      position: relative;
      font-size: 12px;
      color: #B3B3B3;
      
    }
    .text-map .s2{
      position: relative;
      font-size: 12px;
      color: #B3B3B3;
    
    }
    .text-map .s3{
      position: relative;
      font-size: 12px;
      color: #B3B3B3;
      
    }
    .text-map .s4{
      position: relative;
      font-size: 12px;
      color: #B3B3B3;
      
    }
    .text-map .imgmap{
      position: relative;
      width: 130px;
      margin-left: 8px;
      
    }
    .text-map h1{
      position: relative;
      font-size: 14px;
      font-weight: 600;
      margin-top: 5px;
      margin-left: 26px;
    }
    .text-map h2{
      position: relative;
      font-size: 12px;
      margin-left: 26px;
    }
    .m1{
      position: relative;
      width: 80px;
      margin-left:60%;
      margin-top: 20px;
    }
    .m1 {
      transition: transform .5s;
    }
    .m1:hover{
      -ms-transform: scale(1.5); /* IE 9 */
      -webkit-transform: scale(1.5); /* Safari 3-8 */
      transform: scale(1.2);
    }
   
    .item2 p{
      font-size: 10px;
      position: relative;
      text-align: center;
      margin-top: 10px;
    }
     /*-----------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
    
    .head-wave3 {
      
      /*background: linear-gradient(60deg, rgb(124, 86, 185), #47A5D9, rgb(128, 210, 213) 100%);*/
      background-color: #ece9e9;
      height: 1fr;
      border-radius: 10px;
      width:100%;
    }
   
    .img-item3 h4{
      text-align: center;
      position: relative;
      border-radius: 25px;
      background: linear-gradient(-150deg, rgb(80, 218, 195) 0%, #0592BA 65%);
      color: #FFFFFF;
      font-size: 14.5px;
      padding: 6px;
      text-shadow:  1px 1px 2px #444343;
      width: 85%;
      height: auto;
      box-shadow:  5px 5px 5px #ededed;
      margin: auto;
      margin-top: -16%;
    }
    .img-item3 img{
      display: grid;
      justify-content: center;
      margin: auto;
      width: 100%;
      height: 130px;
      margin-top: 8%;
    }

    .text-item3 h6{
     font-size: 12px;
     text-align: center;
     margin-top: 2%;
     
    }
    .text-item3 span{
      font-size: 14px;
      color: #358FB9;
      font-weight: 600;
      
     }
    .item3 p{
      font-size: 10px;
      text-align: center;
      
     }
     
    /****************progress********************/
   
    .pogress{
      background-color:#d8d8d8;
      border-radius:20px;
      height:24px;
      width:165px;
      margin: auto;
    }
    .progress-done{
      background:linear-gradient(to  left,#f2709c,#ff9472);
      border-radius:20px;
      display:flex;
      text-align:center;
      align-items:center;
      justify-content:center;
      height:100%;
      width:0;
      color:white;
      opacity:0;
      padding-top: 2px;
      box-shadow: 0 3px 3px -5px #f2709c,0 2px 5px #f2709c;
      transition: 4s ease;
      
    }
    
   
   /*-----------------------กล่องที่4--ช่องทางการรับและถ่ายทอดเชื้อ--------------------*/
   
    .head-wave4 {
      background-color: #ece9e9;
      height: 1fr;
      width: 100%;
      border-radius: 10px;
    }
    #curve-4 {
      margin-top: 3px;
    }
   
    .text-item4 h4{
      display: grid;
      position: relative;
      font-size: 14.5px;
      text-align: center;
      color: #ffffff;
      background: linear-gradient(150deg, rgb(80, 218, 195) 0%, #0592BA 65%);
      text-shadow:  1px 1px 2px #444343;
      box-shadow:  5px 5px 5px #ededed;
      border-radius: 25px;
      padding: 6px;
      width: 65%;
      height: auto;
      margin: auto;
      margin-top: -18.5%;
    }
    
    .box-donut{
      width: auto;
      height: auto;
      margin-top: 20px;
    }
    
    .text-item4 h6 {
    
      position: relative;
      font-size: 12px;
      color: black;
      margin-top:  -100px;
      margin-left: 250px;
      text-align: center;
      
    }
    .item4 p {
      color: black;
      font-size: 10px;
      text-align: center;
      margin-top: 100px;
      color: rgb(147, 147, 148);
    }
    /*----------------------------------------------------------------------------------*/
    /*************************----------------------------------*************************/
    /*-------------------------responsive----ขนาดหน้าจอต่างๆ------------------------------*/
    /*--------------------------------------------------------------------------------------*/
/*****************************************************************************/   
  /* Medium devices 2560px */
  @media only screen and (max-width: 2560px) { 
    .grid-container {
      grid-template-areas: 
              'item1 item1 item2'
              'item3 item4 item2';
      grid-template-columns: 480px 35% 1fr;
      grid-template-rows: 380px 350px;
      
    }
  
    .header-card {
      height: 25%;
    } 
   
    .text-item1 h6 {
        font-size: 24px;
    }
    .text2-item1 {
        width: 26%;
    }
  /*................................card...........................................*/
  .grid-boxx {
    display: grid;
    grid-template-areas: 
            'box-item1 box-item2 box-item3 box-item4';
    grid-template-columns: 24% 24% 24% 24%;
    grid-template-rows: 108%;
    grid-gap: 15px;
    padding: 20px;
}

/*********************icon*************************/
  .bordericon {
    margin-left: 38%;
  
  }
 /*------------------------------กล่องที่2-แผนที่-------------------------------*/
 
 .buttom-item2 h6{
   margin-left: 50%;
 }
 
 .text-map {
   margin-top: 193px;
   margin-left: 46.5%;
 }
 
  /*-----------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
 
 .img-item3 h4{
   width: 70%;
 }

/*-----------------------กล่องที่4--ช่องทางการรับและถ่ายทอดเชื้อ--------------------*/

 .text-item4 h4{
   width: 50%;
 }
 
}

/*****************************************************************************/   
  @media only screen and (max-width: 2295px) { 
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 46%;
    }
    
  }
/*****************************************************************************/   
  @media only screen and (max-width: 2090px) { 
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 45.5%;
    }
  }
 /*****************************************************************************/   
  @media only screen and (max-width: 1997px) { 
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 45%;
    }
  }
/*****************************************************************************/   
  @media only screen and (max-width: 1959px) { 
      .grid-container {
       grid-template-areas: 
               'item1 item1 item2'
               'item3 item4 item2';
       grid-template-columns: 360px 35% 1fr;
       grid-template-rows: 350px 310px;
       grid-gap: 5px;
       padding: 5px;
       
      }
      /*................................card...........................................*/
      .grid-boxx {
        display: grid;
        grid-template-areas: 
                'box-item1 box-item2 box-item3 box-item4';
        grid-template-columns: 24% 24% 24% 24%;
        grid-template-rows: 100%;
        grid-gap: 15px;
        padding: 20px;
    }
      /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 45.5%;
    }
  }
/*****************************************************************************/   
@media only screen and (max-width: 1768px) { 
  /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 45.2%;
    }
  }
/*****************************************************************************/   
@media only screen and (max-width: 1649px) { 
  /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 44.5%;
    }
  }
  /*****************************************************************************/   
  @media only screen and (max-width: 1600px) { 
    .grid-container {
      display: grid;
      grid-template-areas: 
              'item1 item1 item2'
              'item3 item4 item2';
      grid-template-columns: 310px 40% 1fr;
      grid-template-rows: 315px 320px;
      grid-gap: 5px;
      padding: 5px;
     
    }
    /*................................card...........................................*/
    .grid-boxx {
      display: grid;
      grid-template-areas: 
              'box-item1 box-item2 box-item3 box-item4';
      grid-template-columns: 24% 24% 24% 24%;
      grid-template-rows: 90%;
      grid-gap: 5px;
      padding: 5px;
  }
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
  .text-map {
    margin-left: 44.5%;
  }
}
/*****************************************************************************/   
@media only screen and (max-width: 1589px) { 
  /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 44%;
    }
  }
/*****************************************************************************/   
@media only screen and (max-width: 1497px) { 
  /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 43.5%;
    }
  }
/*****************************************************************************/   
  @media only screen and (max-width: 1440px) { 
  .grid-container {
    grid-template-areas: 
            'item1 item1 item2'
            'item3 item4 item2';
    grid-template-columns: 310px 40% 1fr;
    grid-template-rows: 315px 310px;
    grid-gap: 5px;
    padding: 5px;
  }
  .header-card{
    height: 31%;
  }
  .text-item1 h6 {
    font-size: 22px;
  }
  .text2-item1 {
      width: 35%;
  }
  /*********************icon*************************/
  .bordericon {
    margin-left: 35%;
  
  }
 /*------------------------------กล่องที่2-แผนที่-------------------------------*/
  .buttom-item2 h6{
    margin-left: 48%;
  }
  .text-map {
    margin-left: 42.2%;
  }
  /*-----------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
  .img-item3 h4{
    width: 85%;
  }
  /*-----------------------กล่องที่4--ช่องทางการรับและถ่ายทอดเชื้อ--------------------*/
  .text-item4 h4{
    width: 65%;
  }
 
}
/*****************************************************************************/   
@media only screen and (max-width: 1336px) { 
      /*------------------------------กล่องที่2-แผนที่-------------------------------*/
      .text-map {
        margin-left: 41.5%;
      }
  }
  /*****************************************************************************/
  /*----------จอคอมตั้งโต๊ะขนาดเล็ก---------------*/
@media only screen and (max-width: 1290px) { 
  .grid-container {
    grid-template-areas: 
            'item1 item1 item2'
            'item3 item4 item2';
    grid-template-columns: 290px 40% 1fr;
    grid-template-rows: 315px 310px;
    grid-gap: 5px;
    padding: 5px;
  }
  .header-card{
    height: 31%;
  }
  /*********************icon*************************/
  .bordericon {
    margin-left: 32%;
  
  }
  /*------------------------------กล่องที่2-แผนที่-------------------------------*/
  .text-map {
    margin-left: 40.5%;
  }
  
}
/*****************************************************************************/
@media only screen and (max-width: 1250px) { 
    .grid-container {
      /*height: 626px;*/
      display: grid;
      grid-template-areas: 
              'item1 item1 item1'
              'item3 item4 item4'
              'item2 item2 item2';
      grid-template-columns: 41% 40% 1fr;
      grid-template-rows: 315px 320px;
    }
    /*---------------------กล่องที่1---card-------------------------------------*/
    .grid-boxx {
      display: grid;
      grid-template-areas: 
              'box-item1 box-item2 box-item3 box-item4';
      grid-template-columns: 21% 21% 21% 21%;
      grid-template-rows: 90%;
      grid-gap: 10px;
      padding: 5px;
      justify-content: center;
      margin-top: 40px;
    }
    .text2-item1 {
      width: 30%;
    }

    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .buttom-item2 h6 {
      margin-top: -570px;
      margin-left: 52%;
    }
    .text-map {
      margin-top: 176px;
      margin-left: 47%;
    }
    /*-----------------------กล่องที่4--ช่องทางการรับและถ่ายทอดเชื้อ--------------------*/
    .text-item4 h4{
      width: 60%;
    }
    .item4 p {
      margin-top: 95px;
    }
}
/*****************************************************************************/   
  @media only screen and (max-width: 1115px) { 
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-left: 46.5%;
    }
}
/*****************************************************************************/   
  /* Medium devices (landscrape tablets, 1024px and up) ipad pro แนวตั้ง*/
  @media only screen and (max-width: 1024px) { 
      .grid-container {
        /*height: 626px;*/
        display: grid;
        grid-template-areas: 
                'item1 item1 item1'
                'item3 item4 item4'
                'item2 item2 item2';
        grid-template-columns: 41% 40% 1fr;
        grid-template-rows: 315px 320px;
      }
    /*---------------------กล่องที่1---card-------------------------------------*/
    .grid-boxx {
      display: grid;
      grid-template-areas: 
              'box-item1 box-item2 box-item3 box-item4';
      grid-template-columns: 21% 21% 21% 21%;
      grid-template-rows: 90%;
      grid-gap: 10px;
      padding: 5px;
      justify-content: center;
      margin-top: 40px;
    }
    .text2-item1 {
      width: 30%;
    }
   
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .buttom-item2 h6 {
      margin-top: -570px;
      margin-left: 52%;
    }
    .text-map {
      margin-top: 176px;
      margin-left: 46%;
    }
}
/*****************************************************************************/   
  @media only screen and (max-width: 979px) { 
    .grid-container {
      grid-template-areas: 
              'item1 item1 item1'
              'item3 item4 item4'
              'item2 item2 item2';
      grid-template-columns: 41% 40% 1fr;
      grid-template-rows: 315px 320px;
    }
  /*---------------------กล่องที่1---card-------------------------------------*/
  .grid-boxx {
    display: grid;
    grid-template-areas: 
            'box-item1 box-item2 box-item3 box-item4';
    grid-template-columns: 23% 23% 23% 23%;
    grid-template-rows: 90%;
    grid-gap: 5px;
    padding: 5px;
  }
  .text2-item1 {
    width: 30%;
  }
 
  /*------------------------------กล่องที่2-แผนที่-------------------------------*/
  .buttom-item2 h6 {
    margin-top: -570px;
    margin-left: 52%;
  }
  .text-map {
    margin-top: 176px;
    margin-left: 46%;
  }
  /*--------------------------กล่องที่3--โดนัท----------------------------------*/
  .item3 p{
    margin-top: 19px;
   }
}
 /*****************************************************************************/    
  @media only screen and (max-width: 923px) { 
    
    .grid-container {
      display: grid;
      grid-template-areas: 
              'item1 item1 item1'
              'item3 item3 item3'
              'item4 item4 item4'
              'item2 item2 item2';   
      grid-template-rows: 1fr;

    }
    .grid-boxx {
      grid-template-areas: 
              'box-item1 box-item2' 
              'box-item3 box-item4';
      grid-template-columns: 35% 35%;
      grid-template-rows: 125px 145px;
      grid-gap: 20px;
      padding: 5px;
      justify-content: center;
      
    }
    /*********************icon*************************/
    .bordericon {
      margin-left: 38%;
    
    }
    .box-item3 {
      margin-top: 25px;
    }

    .box-item4 {
      margin-top: 25px;
    }
    .text2-item1 {
      width: 40%;
      height: auto;
      margin-top: 5px;
    }
    /*------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
      
    .img-item3 h4 {
      width: 40%;
    }
    .img-item3 img{
      height: 150px;
      margin-top: 15px;
    }
    .pogress{
      width: 185px;
    }
    .item3 p{
      margin-top: 20px;
    }
    /*------------------------กล่อง4--donut----------------------------*/
    .text-item4 h4 {
      width: 40%;
    }
    #big_box1_apex {
      margin-top: 10px;
    }
  
    .text-item4 h6 {
      margin-top:  -110px;
      margin-left: 220px;
    
    }
    .item4 p {
      margin-top: 100px;
    }
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-top: 178px;
      margin-left: 45.5%;
    }
  }
  /*****************************************************************************/    
  /* Medium devices Pixel 2XL แนวนอน*/
  @media only screen and (max-width: 823px) { 
    
    .grid-container {
      display: grid;
      grid-template-areas: 
              'item1 item1 item1'
              'item3 item3 item3'
              'item4 item4 item4'
              'item2 item2 item2';   
      grid-template-rows: 1fr;

    }
    .grid-boxx {
      grid-template-areas: 
              'box-item1 box-item2' 
              'box-item3 box-item4';
      grid-template-columns: 35% 35%;
      grid-template-rows: 120px 145px;
      grid-gap: 20px;
      padding: 5px;
      justify-content: center;
      
    }
    /*********************icon*************************/
    .bordericon {
      margin-left: 36%;
    
    }
    .box-item3 {
      margin-top: 25px;
    }

    .box-item4 {
      margin-top: 25px;
    }
    .text2-item1 {
      width: 40%;
      height: auto;
      margin-top: 5px;
    }
    /*------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
      
    .img-item3 h4 {
      width: 45%;
    }
    .img-item3 img{
      height: 150px;
      margin-top: 15px;
    }
    .pogress{
      width: 185px;
    }
    .item3 p{
      margin-top: 20px;
    }
    /*------------------------กล่อง4--donut----------------------------*/
    .text-item4 h4 {
      width: 50%;
    }
    #big_box1_apex {
      margin-top: 10px;
    }
  
    .text-item4 h6 {
      margin-top:  -110px;
      margin-left: 220px;
    
    }
    .item4 p {
      margin-top: 100px;
    }
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-top: 178px;
      margin-left: 45%;
    }
  }
  /*****************************************************************************/    
  /* Medium devices i phone x แนวนอน*/
  @media only screen and (max-width: 812px) { 
    
    .grid-container {
      display: grid;
      grid-template-areas: 
              'item1 item1 item1'
              'item3 item3 item3'
              'item4 item4 item4'
              'item2 item2 item2';   
      grid-template-rows: 1fr;
    }
    /*---------------------กล่องที่1---card----------------------------------*/
      
    .grid-boxx {
      grid-template-areas: 
              'box-item1 box-item2' 
              'box-item3 box-item4';
      grid-template-columns: 35% 35%;
      grid-template-rows: 120px 145px;
      grid-gap: 20px;
      padding: 5px;
      justify-content: center;
      
    }
    /*********************icon*************************/
    .bordericon {
      margin-left: 35%;
    
    }
    .box-item3 {
      margin-top: 25px;
    }

    .box-item4 {
      margin-top: 25px;
    }
    .text2-item1 {
      width: 50%;
      height: auto;
      margin-top: 5px;
    }
    /*------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
      
    .img-item3 h4 {
      width: 45%;
    }
    .img-item3 img{
      height: 150px;
      margin-top: 15px;
    }
    .pogress{
      width: 185px;
    }
    .item3 p{
      margin-top: 20px;
    }
    /*------------------------กล่อง4--donut----------------------------*/
    .text-item4 h4 {
      width: 50%;
    }
    #big_box1_apex {
      margin-top: 10px;
    }
  
    .text-item4 h6 {
      margin-top:  -110px;
      margin-left: 220px;
    
    }
    .item4 p {
      margin-top: 100px;
    }
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-top: 178px;
      margin-left: 44.5%;
    }
  }
/*****************************************************************************/    
  /* Medium devices ipad/ ipadmini แนวตั้ง*/
    @media only screen and (max-width: 768px) { 

      .grid-container {
        display: grid;
        grid-template-areas: 
                'item1 item1 item1'
                'item3 item3 item3'
                'item4 item4 item4'
                'item2 item2 item2';     
        grid-template-rows: 1fr;
      }
      /*---------------------กล่องที่1---card----------------------------------*/
      
      .grid-boxx {
        grid-template-areas: 
                'box-item1 box-item2' 
                'box-item3 box-item4';
        grid-template-columns: 35% 35%;
        grid-template-rows: 120px 145px;
        grid-gap: 20px;
        padding: 5px;
        justify-content: center;
        
      }
      .box-item3 {
        margin-top: 25px;
      }

      .box-item4 {
        margin-top: 25px;
      }
      .text2-item1 {
        width: 50%;
        height: auto;
        margin-top: 5px;
      }
     
      /*------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
      
      .img-item3 h4 {
        width: 45%;
      }
      .img-item3 img{
        height: 150px;
        margin-top: 15px;
      }
      .pogress{
        width: 185px;
      }
      .item3 p{
        margin-top: 20px;
      } 
      
      /*------------------------------กล่องที่2-แผนที่-------------------------------*/
      .text-map {
        margin-top: 176px;
        margin-left: 44.5%;
      }
      
    }
/*****************************************************************************/    
/* Medium devices ipad/ ipadmini แนวตั้ง*/
  @media only screen and (max-width: 767px) { 

    .grid-container {
      display: grid;
      grid-template-areas: 
              'item1 item1 item1'
              'item3 item3 item3'
              'item4 item4 item4'
              'item2 item2 item2';     
      grid-template-rows: 1fr;
    }
    /*---------------------กล่องที่1---card----------------------------------*/
    
    .grid-boxx {
      grid-template-areas: 
              'box-item1 box-item2' 
              'box-item3 box-item4';
      grid-template-columns: 35% 35%;
      grid-template-rows: 120px 145px;
      grid-gap: 20px;
      padding: 5px;
      justify-content: center;
      
    }
    /*********************icon*************************/
    .bordericon {
      margin-left: 37%;
    
    }
    .box-item3 {
      margin-top: 25px;
    }

    .box-item4 {
      margin-top: 25px;
    }
    .text2-item1 {
      width: 50%;
      height: auto;
      margin-top: 5px;
    }
   
    /*------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
    
    .img-item3 h4 {
      width: 45%;
    }
    .img-item3 img{
      height: 150px;
      margin-top: 15px;
    }
    .pogress{
      width: 185px;
    }
    .item3 p{
      margin-top: 20px;
    } 
    
    /*------------------------------กล่องที่2-แผนที่-------------------------------*/
    .text-map {
      margin-top: 176px;
      margin-left: 45.5%;
    }
    
  }
/*****************************************************************************/       
    /* Medium devices phone 6/7/8 plus แนวนอน*/
    @media only screen and (max-width: 736px) { 
        .grid-container {
          grid-template-areas: 
              'item1 item1 item1'
              'item3 item4 item4'
              'item2 item2 item2';
          grid-template-rows: 1fr;
        }
        /*---------------------กล่องที่1---card----------------------------------*/
        .grid-boxx {
          grid-template-areas: 
                  'box-item1 box-item2' 
                  'box-item3 box-item4';
          grid-template-columns: 40% 40%;
          grid-template-rows: 120px 145px;
          grid-gap: 20px;
          padding: 5px;
          justify-content: center;
          
        }
        .box-item3 {
          margin-top: 25px;
        }
  
        .box-item4 {
          margin-top: 25px;
        }
        .text2-item1 {
          width: 40%;
          margin-top: 5px;
        }
        /******************************/
        .bordericon {
           margin-left: 35%;
         }
        /*------------------------------กล่องที่2-แผนที่-------------------------------*/
        .text-map {
          margin-top: 176px;
          margin-left: 46%;
        }
        /*-----------กล่องที่3---progress--------------------*/
        .img-item3 h4 {
          width: 80%;
        }
        .img-item3 img{
          height: 150px;
          margin-top: 25px;
        }
        .text-item3 h6{
          margin-top: 5%;
          
         }
        .item3 p{
          margin-top: 25px;
        }
        /*---------กล่องที่4------donut-----------*/
        .text-item4 h4 {
          width: 60%;
        }
        .text-item4 h6 {
          margin-top: -185px;
          margin-left: 5px;
        }
        .item4 p{
          margin-top: 150px;
        }  
    }
    /*****************************************************************************/   
    @media only screen and (max-width: 667px) { 
      .grid-container {
        grid-template-areas: 
          'item1 item1 item1'
          'item3 item3 item3'
          'item4 item4 item4'
          'item2 item2 item2';
        grid-template-rows: 1fr;
        
    }
     /*------------------------------กล่องที่2-แผนที่-------------------------------*/
     .text-map {
      margin-top: 176px;
      margin-left: 45%;
    }
    /*------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
      
      .img-item3 h4 {
        width: 40%;
      }
      .item3 p{
        margin-top: 20px;
      }
     /*---------กล่องที่4------donut-----------*/
      .text-item4 h4 {
        width: 40%;
      }
      .text-item4 h6 {
        margin-top: -185px;
        margin-left: 5px;
      }
      
    }
    /*****************************************************************************/   
    /* Medium devices MotoG4 / Galaxy S5 แนวนอน*/
    @media only screen and (max-width: 640px) { 
      .grid-container {
        grid-template-areas: 
          'item1 item1 item1'
          'item3 item3 item3'
          'item4 item4 item4'
          'item2 item2 item2';
        grid-template-rows: 1fr;
        
    }
    /*------------------กล่องที่3--สถานการณ์ตีตราและเลือกปฎิบัติ-----------------*/
      
    .img-item3 h4 {
      width: 40%;
    }
    .item3 p{
      margin-top: 20px;
    }
     /*---------กล่องที่4------donut-----------*/
     .text-item4 h4 {
      width: 40%;
    }
    .text-item4 h6 {
      margin-top: -185px;
      margin-left: 5px;
    }
  }

/*****************************************************************************/   
     /* Medium devices iphone 5/SE แนวนอน*/
     @media only screen and (max-width: 568px) { 
      .grid-container {
        grid-template-areas: 
          'item1 item1 item1'
          'item3 item3 item3'
          'item4 item4 item4'
          'item2 item2 item2';
        grid-template-rows: 1fr;
        
      }
      /*---------------------กล่องที่1---card----------------------------------*/
      .grid-boxx {
        grid-template-areas: 
                'box-item1 box-item2' 
                'box-item3 box-item4';
        grid-template-columns: 40% 40%;
        grid-template-rows: 120px 145px;
        grid-gap: 20px;
        padding: 5px;
        justify-content: center;
        
      }
       /*------------------------------กล่องที่2-แผนที่-------------------------------*/
       .text-map {
        margin-top: 176px;
        margin-left: 43%;
      }
      /*-----------กล่องที่3---progress------*/
      .img-item3 h4 {
          width: 40%;
      }
      .text-item3 h6{
        margin-top: 2%;
      }
      /*---------กล่องที่4------donut--------*/
      .text-item4 h4 {
        width: 40%;
      }
      .text-item4 h6 {
        margin-left: 5px;
      }
      .item4 p{
        margin-top: 150px;
      } 
       
    }
    /*****************************************************************************/   
     @media only screen and (max-width: 472px) { 
      .grid-container {
        grid-template-areas: 
          'item1 item1 item1'
          'item3 item3 item3'
          'item4 item4 item4'
          'item2 item2 item2';
        grid-template-rows: 1fr;
        
      }
      /*---------------------กล่องที่1---card----------------------------------*/
      .grid-boxx {
        grid-template-areas: 
                'box-item1 box-item2' 
                'box-item3 box-item4';
        grid-template-columns: 48% 48%;
        grid-template-rows: 120px 145px;
        grid-gap: 10px;
        padding: 5px;
        justify-content: center;
        
      }
      .text2-item1 {
        width: 48%;
      }
       /*------------------------------กล่องที่2-แผนที่-------------------------------*/
       .text-map {
        margin-top: 176px;
        margin-left: 43%;
      }
      /*-----------กล่องที่3---progress------*/
      .img-item3 h4 {
          width: 50%;
      }
      .text-item3 h6{
        margin-top: 2%;
      }
      /*---------กล่องที่4------donut--------*/
      .text-item4 h4 {
        width: 50%;
      }
      .text-item4 h6 {
        margin-left: 5px;
      }
      .item4 p{
        margin-top: 150px;
      } 
       
    }
/*****************************************************************************/   
    /* Medium devices i phone6/7/8 plus แนวตั้ง*/
    @media only screen and (max-width: 414px) 
    { 
        .grid-container {
          grid-template-areas: 
            'item1 item1 item1'
            'item3 item3 item3'
            'item4 item4 item4'
            'item2 item2 item2';
          grid-template-rows: 1fr;
          
      }
      /*---------------------กล่องที่1---card----------------------------------*/
      .grid-boxx {
        grid-template-areas: 
                'box-item1 box-item2' 
                'box-item3 box-item4';
        grid-template-columns: 48% 48%;
        grid-template-rows: 110px 145px;
        grid-gap: 5px;
        padding: 5px;
        justify-content: center;
        
      }
      .box-item3 {
        margin-top: 35px;
      }

      .box-item4 {
        margin-top: 35px;
      }
      .text-item1 {
        width: 20%;
        margin-left: 10px;
      
      }
      .text2-item1 {
        width: 55%;
        height: auto;
        margin-top: -5px;
      }
      /*-----------กล่องที่3---progress--------------------*/
      .img-item3 h4 {
          width: 65%;
      }
      .text-item3 h6{
        margin-top: 2%;
        
       }
        /*---------กล่องที่4------donut--------*/
      .text-item4 h4 {
        width: 65%;
      }
      /*------------------------------กล่องที่2-แผนที่-------------------------------*/
      .text-map {
        margin-top: 176px;
        margin-left: 42%;
      }
    }
/*****************************************************************************/   
    /* Medium devices iphone x /iphone 6/7/8 แนวตั้ง*/
    @media only screen and (max-width: 375px) 
    { 
        .grid-container {
          grid-template-areas: 
            'item1 item1 item1'
            'item3 item3 item3'
            'item4 item4 item4'
            'item2 item2 item2';
          grid-template-rows: 1fr;
          
        }
        /*------------------------------กล่องที่2-แผนที่-------------------------------*/
        .text-map {
          margin-top: 176px;
          margin-left: 41%;
        } 
        /*---------กล่องที่4------donut-----------*/
        #big_box1_apex {
          display: table-cell;
          text-align: center;
          vertical-align: middle;
        }
        .text-item4 h6 {
          margin-top: -185px;
          margin-left: 5px;
        } 
    }
 
/*****************************************************************************/   
    /* Medium devices iphone x /iphone 5/SE แนวตั้ง*/
    @media only screen and (max-width: 320px) 
    { 
        .grid-container {
            grid-template-areas: 
              'item1 item1 item1'
              'item3 item3 item3'
              'item4 item4 item4'
              'item2 item2 item2';
            grid-template-rows: 1fr;
            
        } 
      /*---------------------กล่องที่1---card----------------------------------*/
        .grid-boxx {
          grid-template-areas: 
                  'box-item1' 
                  'box-item2'
                  'box-item3'
                  'box-item4';
          grid-template-columns: 70%;
          grid-template-rows: 120px 120px 120px 120px;
          grid-gap: 35px;
          padding: 5px;
          justify-content: center;
          
        }
        .box-item3 {
          margin-top: 0px;
        }

        .box-item4 {
          margin-top: 0px;
        }
      /*---------กล่องที่4------donut--------*/
        .text-item4 h4 {
          width: 70%;
        }
        .text-item4 h6 {
          margin-top: -189px;
        }
      
      /*-------กล่องที่2--แผนที่---------------*/
       .buttom-item2 h6{
         margin-top: -585px;
         margin-left: 46%;
       }
       .text-map {
        margin-top: 193px;
        margin-left: 40%;
      } 
    }