@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap');

/*html {
    overflow-y: scroll;
}*/

body {
    font-family: 'Kanit', sans-serif;
    margin: 0;
    height: 600px;
    position: absolute;
    
}

/*.big-image .page4-image {
    background: url('images/background1.png') no-repeat;
    min-width: 780px;
    margin-top: 30px;
    margin-left: 0px;
 }*/

 nav1{
    /*width: 100%;*/
    margin-top: 1%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*float: left;*/
   
}

   .logo {
    width: 120px;
    height: 120px;
    /*top: -1290px;*/
    margin-left: 50px;
 }


 .no-svg .menu-icon{
    float:  right;
    background: rgb(146, 196, 211);
    position: fixed;
    width: 60px;
    height: 60px;
    /*margin-top: 1240px;*/
    right: 10px;
    cursor: pointer;
    
}

.active{
    background: rgb(138, 175, 182);
    position: absolute;
    display: block;
    width: 30%;
    /*left: 20px;*/
    top: 130px;
    height: 95%; 
}


 ul{
    display: none;
    list-style-type: none;
    /*margin: 0;
    padding: 0;*/
}

ul li a.current {
    background-color: lightgray;
}


 ul li a {
    background: rgba(255, 255, 255, .35);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
    font-size: 24px;
    display: block;
    padding: 1.2em 4em;
}

ul li a:hover {background-color: lightslategray;   
 }


 .back_container .image0 {
    background: url('images/back1.svg') no-repeat;
    display: block;
    margin:  0, auto;
    min-width: 100%; 
    /*max-height: 600px; 
    overflow: hidden;*/
 }
       
 h {
    display: block;
    text-align: center;
    margin-left:  40px;
    margin-top:   -270px;
    font-size: 56px;
    font-weight: bold;
}

.image1 .no-svg {
    transform-origin: 0px 0px; }

.container .image1{
    display: block;
    margin-top: 20px;
    margin:  0, auto;
    min-width: 780px; 
    max-height: 600px;  
    overflow: hidden;    
}


.home1-image .no-svg {
    transform-origin: 0px 0px; }

.big-image1 .home1-image {
    background: url('images/background4_1.png') no-repeat;
    /*padding: 20px 40px 40px;
    display: flex;*/
    margin-top: 100px;
    min-width: 100%;
    overflow: hidden;
    
 }

 h1 .no-svg {
    transform-origin: 0px 0px; }

 h1 {
    display: block;
    text-align: center;
    margin-top:   -450px;
    color: #550000ff;
    font-size: 56px !important;
    font-weight: bold;
}

 
/*.hd1 {
    display:  block;    
    margin-top: 400px;
    text-align: center; 
}*/

.hed {
    display:  block;
    /*margin-top: 50px;*/
    width: 80%;
    /*margin-top: 500px;*/
    margin:  150px auto 30px auto;
    text-align: center;      
    font-size: 48px;
    font-weight: bold;
 
}

 .hd1 .ex1 {
        display: block;
        margin:  100px auto 30px auto;
        width: 80%;
 }

 /*.hd2 {
    display:  block;    
    margin-top: 300px;
  
    text-align: center; 
}*/

.hed1 {
    display:  block;
    /*margin-top: 50px;*/
    width: 80%;
    /*margin-top: 500px;*/
    margin:  200px auto 30px auto;
    text-align: center;      
    font-size: 48px;
    font-weight: bold;
}


 .hd2 .ex1 {
    display: block;
    margin:  100px auto 30px auto;
    width: 80%;
 }

 .hd3 .ex1 {
     display: block;
    margin:  150px auto 30px auto;
    width: 80%;
 }

 @media only screen and (min-width: 900px) and (max-width: 1199px){

    body {
        margin: 0;
        max-width: 100%;
        position: absolute;
        /*margin: 20px auto;*/

      }

       nav1 {
                margin-top: 1%;
                overflow: hidden;
            }
         
            logo {
              width: 100px;
              height: 100px;
             /* margin-top: -300px;*/
            }

            .menu-icon {
              display:  none;
              
          }

          nav1 ul{
              display:flex;
              list-style: none;
              padding: 0;
              margin-right: 20px;
              /*margin-top: -300px;*/
          }
      
          ul li{ 
              margin: 10px 8px 8px 10px;
      
          }

          ul li a.current {
            background-color:lightgray;
        }
        
         ul li a {
             text-decoration: none;
             color: black;
             font-size: 20px;
             font-weight: bold;
             display: block;
             padding: 20px;
         }

         .hed {
            margin:  150px auto 30px auto;
      
    }

}

    @media only screen and (min-width: 1200px) and (max-height: 899px) {

       

        nav1 {
            margin-top: 2%;
            overflow: hidden;
        }
     
  
        .logo {
          width: 110px;
          height: 110px;
         /* margin-top: -300px;*/
        }
      
        .menu-icon {
          display:  none;
          
      }
         
     
     
      nav1 ul{
          display:flex;
          list-style: none;
          padding: 0;
          margin-right: 20px;
          /*margin-top: -300px;*/
      }
  
      ul li{ 
          margin: 20px 10px 20px 10px;
  
      }

      ul li a.current {
        background-color: lightgray;
    }
    
     ul li a {
         text-decoration: none;
         color: black;
         font-size: 20px;
         font-weight: bold;
         display: block;
         padding: 2em;
     }

     .hed {
        margin:  180px auto 30px auto;

    }

}

 @media only screen and (min-width: 1600px) and (min-height: 900px) {


    
    body {
        margin: 0;
        width: 100%;
        position: absolute;
        /*margin: 20px auto;*/

      }

      nav1 {
        margin-top: 5%;
        overflow: hidden;
    }
 
    logo {
      width: 100px;
      height: 100px;
     /* margin-top: -300px;*/
    }

    .menu-icon {
      display:  none;
      
  }

  nav1 ul{
      display:flex;
      list-style: none;
      padding: 0;
      margin-right: 5px;
      /*margin-top: -300px;*/
  }

  ul li{ 
      margin: 10px 8px 8px 10px;

  }

  ul li a.current {
    background-color: lightgray;
}

 ul li a {
     text-decoration: none;
     color: black;
     font-size: 20px;
     font-weight: bold;
     display: block;
     padding: 20px;
 }


      .back_container .image0 {
        background: url('images/back1_1.png') no-repeat;
        display: block;
        margin:  0, auto;
        min-width: 100%; 
        height: 100%;  
        overflow: hidden;
     }

     h {
         margin-top: -400px;
     }

     .container .image1{
        
        margin-top: 100px;          
    }


     /*h2 .no-svg {
        transform-origin: 0px 0px; }*/

      /*.big-image .page4-image {
        background: url('images/background1.png') no-repeat;
        
        min-width: 100%;
        margin-top: 30px;
        margin-left: 0px;
        overflow: hidden;
     }*/

      .hed {
        margin:  200px auto 30px auto;
     
    }

    .hd1 {      
        margin-top: 650px;
    
    }

     /* .back1 {
        background-image: url('images/page3_backgr3.png') repeat-y;
        width: 100%;
        height: auto; 
        overflow: hidden;  
    }*/


     .container .container-image {
        display: flex;
        width: 350px;
        float: left;
        padding: 20px;
      
    }
    

    .ex1 {
        margin:  30px 20px 30px 50px;
        min-width: 90%;
     
     }
    
           
}


/* @media only screen and (min-width: 1080px) and (max-height: 899px) {

    h {   
        margin-top:   -250px;
  
    } 

}*/