@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-top: 0;
    min-width: 800px;
    /*min-width: 800px;
    height: 600px;*/

    position: absolute;
    
}



.big-image .home1-image {
    min-width: 100%;
    height: auto;
}

 h {
    display: block;
    text-align: center;
    margin-top: 80px;
    /*margin-left:  7%;
    margin-top:   -70%;*/
    font-size: 36px;
    font-weight: bold;
    color: #550000;
}

  
 .container {
    /*padding: 20px 40px 40px;
    display: flex;*/
    margin-top: 100px;
 }


    .container .container-image {
        display: inline;
        width: 300px;
        float: right; 
        margin-right: 5%;
        overflow: hidden;      
        
    }
    
    
   .container .container-text {
        display: inline-block;
        margin-left: 50px;
        font-size: 26px;
        width: 50%;
        /*text-anchor: unset;*/
        overflow: hidden;
        /*padding:  20px;*/

    }

    h1 {
        display:  block;
        text-align: center;
        margin-top:   80px;
        font-size: 36px;
        font-weight: bold;
        color: #550000;
    }

    
       
       div .content1 {
           display: block;
            margin-top: 80px;
    
        }
        

        .content1 .ipage1 {
           display: flex;
           margin-top: 15%;
           width: 300px;
           /*height: 22%;*/
           float: right;
           margin-right: 20px;     
            
        }
        
        .content1 .content-text1{
            display: inline-block;
            /*margin-top: -150px;
            margin-inline-start: 300px;*/
            width: 60%;
            font-size: 26px;
            overflow: hidden;
            margin-left: 50px;
    
        }

        div .content2 {
            display: block;
            margin-top: 100px;
            overflow: hidden;
        }
         
        .content2 .content-text2{
            display: inline-block;
            /*float:  right;*/
            margin-top: 80px;
            width: 48%;
            margin-right: 80px;
            margin-inline-start: 50%;
            /*width: 45%;*/
            font-size: 26px;
            overflow: hidden; 
            /*margin-left: 50%; */  
        }

         .content2 .ipage2 {
           display: inline;
           margin-top: -70%;
           width: 30%;
           /*height: 320px;*/
           float: left;
           margin-left: 50px;
           overflow: hidden;
        
        }
        
        

        h2 {
            display:  block;
            text-align: center;
            margin-top:   100px;
            font-size: 36px;
            font-weight: bold;
            color: #550000;
        }
       
        div .content3 {
            display: block;
            margin-top: 100px;
            overflow: hidden;
        }
        

        .content3 .ipage3 {
            display: inline;
            margin-top: 15%;
            width: 300px;
           /* height: auto;*/
            float: right;
            margin-right: 2%;     
             
         }
         
         .content3 .content-text3{
             display: inline-block;
             /*margin-top: -150px;
             margin-inline-start: 300px;*/
             /*width: 40%;*/
             font-size: 26px;
             overflow: hidden;
             margin-left: 50px;
     
         }

        

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

            body {
                margin-top: 0;
                min-width: 100%;
                position: absolute;
                
            }

            
      .big-image .home1-image {
        min-width: 100%;
        height: auto;
    }
    
     h {
        display: block;
        text-align: center;
        margin-top: 80px;
        /*margin-left:  7%;
        margin-top:   -70%;*/
        font-size: 36px;
        font-weight: bold;
        color: #550000;
    }
    
    .container {
    
    margin-top: 100px;
    }


    .container .container-image {
        display: inline;
        width: 350px;
        float: right; 
        margin-right: 10px;
        overflow: hidden;      
        
    }
    
    
   .container .container-text {
        display: inline-block;
        margin-left: 10px;
        font-size: 26px;
        width: 60%;
        /*text-anchor: unset;*/
        overflow: hidden;
        /*padding:  20px;*/

    }

    h1 {
        display:  block;
        text-align: center;
        margin-top:   80px;
        font-size: 36px;
        font-weight: bold;
        color: #550000;
    }

    
       
       div .content1 {
           display: block;
            margin-top: 80px;
    
        }
        

        .content1 .ipage1 {
           display: flex;
           margin-top: 15%;
           width: 30%;
           /*height: 22%;*/
           float: right;
           margin-right: 2%;     
            
        }
        
        .content1 .content-text1{
            display: inline-block;
            /*margin-top: -150px;
            margin-inline-start: 300px;*/
            width: 65%;
            font-size: 26px;
            overflow: hidden;
            margin-left: 10px;
    
        }
        div .content2 {
            display: block;
            margin-top: 100px;
            overflow: hidden;
        }
         
        .content2 .content-text2{
            display: inline-block;
            /*float:  right;*/
            margin-top: 80px;
            width: 60%;
            margin-left: 40%;
            /*width: 45%;*/
            font-size: 26px;
            overflow: hidden; 
            /*margin-left: 50%; */  
        }

         .content2 .ipage2 {
           display: inline;
           margin-top: -70%;
           width: 32%;
           /*height: 320px;*/
           float: left;
           margin-left: 10px;
           overflow: hidden;
        
        }

        div .content3 {
            display: block;
            margin-top: 100px;
            overflow: hidden;
        }
        

        .content3 .ipage3 {
            display: inline;
            margin-top: 15%;
            width: 300px;
            /*height: 13%;*/
            float: right;
            margin-right: 10px;     
             
         }
         
         .content3 .content-text3{
             display: inline-block;
            
             width: 65%;
             font-size: 26px;
             overflow: hidden;
             margin-left: 10px;
     
         }
        
            
            
        }

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

            body {
                margin-top: 0;
                width: 100%;
                position: absolute;
                
            }

           
        
      .big-image .home1-image {
        min-width: 100%;
        height: auto;
    }
    
     h {
        display: block;
        text-align: center;
        margin-top: 80px;
        /*margin-left:  7%;
        margin-top:   -70%;*/
        font-size: 36px;
        font-weight: bold;
        color: #550000;
    }
    
    .container {
    
    margin-top: 100px;
    }

         .container .container-image {
            display: inline;
            width: 25%;
            float: right; 
            margin-right: 10%;
            overflow: hidden;      
            
        }
        
        .container .container-text {
            display: inline-block;
            margin-left: 50px;
            font-size: 26px;
            width: 54%;
            /*text-anchor: unset;*/
            overflow: hidden;
            /*padding:  20px;*/
    
        }
    
        h1 {
            display:  block;
            text-align: center;
            margin-top:   80px;
            font-size: 36px;
            font-weight: bold;
            color: #550000;
        }
    
        
           
           div .content1 {
               display: block;
                margin-top: 80px;
        
            }
            
    
            .content1 .ipage1 {
               display: flex;
               margin-top: 15%;
               width: 27%;
               /*height: 22%;*/
               float: right;
               margin-right: 8%;     
                
            }
            
            .content1 .content-text1{
                display: inline-block;
                /*margin-top: -150px;
                margin-inline-start: 300px;*/
                /*width: 40%;*/
                font-size: 26px;
                overflow: hidden;
                margin-left: 50px;
        
            }
            div .content2 {
                display: block;
                margin-top: 100px;
                overflow: hidden;
            }
             
            .content2 .content-text2{
                display: inline-block;
                /*float:  right;*/
                margin-top: 80px;
                width: 48%;
                margin-right: 50px;
                /*margin-inline-start: 50%;*/
                margin-left: 45%;
                /*width: 45%;*/
                font-size: 26px;
                overflow: hidden; 
                /*margin-left: 50%; */  
            }
    
             .content2 .ipage2 {
               display: inline;
               margin-top: -60%;
               width: 35%;
               /*height: 320px;*/
               float: left;
               margin-left: 50px;
               overflow: hidden;
            
            }
    
             
    
           .content3 {
                display: block;
                margin-top: 80px !important;
                overflow: hidden;
            }
            
    
            .content3 .ipage3 {
                display: inline;
                margin-top: 15%;
                width: 25%;
                height: 13%;
                float: right;
                margin-right: 10%;     
                 
             }
             
             .content3 .content-text3{
                 display: inline-block;
                 /*margin-top: -150px;
                 margin-inline-start: 300px;*/
                 /*width: 40%;*/
                 font-size: 26px;
                 overflow: hidden;
                 margin-left: 50px;
         
             }
            
           
        
        }      

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


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

      }

     
      .big-image .home1-image {
        min-width: 100%;
        height: auto;
    }
    
     h {
        display: block;
        text-align: center;
        margin-top: 80px;
        /*margin-left:  7%;
        margin-top:   -70%;*/
        font-size: 48px;
        font-weight: bold;
        color: #550000;
    }
    
    .container {
    
    margin-top: 100px;
    }


    .container .container-image {
        display: inline;
        width: 25%;
        float: right; 
        margin-right: 20%;
        overflow: hidden;      
        
    }
    
    
   .container .container-text {
        display: inline-block;
        margin-left: 50px;
        font-size: 28px;
        width: 50%;
        /*text-anchor: unset;*/
        overflow: hidden;
        /*padding:  20px;*/

    }

    h1 {
        display:  block;
        text-align: center;
        margin-top:   80px;
        font-size: 48px;
        font-weight: bold;
        color: #550000;
    }

    
       
       div .content1 {
           display: block;
            margin-top: 80px;
    
        }
        

        .content1 .ipage1 {
           display: flex;
           margin-top: 12%;
           width: 25%;
           /*height: 22%;*/
           float: right;
           margin-right: 10%;     
            
        }
        
        .content1 .content-text1{
            display: inline-block;
            /*margin-top: -150px;
            margin-inline-start: 300px;*/
            /*width: 40%;*/
            font-size: 28px;
            overflow: hidden;
            margin-left: 50px;
    
        }
        div .content2 {
            display: block;
            margin-top: 100px;
            overflow: hidden;
        }
         
        .content2 .content-text2{
            display: inline-block;
            /*float:  right;*/
            margin-top: 80px;
            width: 48%;
            margin-right: 80px;
            margin-inline-start: 50%;
            /*width: 45%;*/
            font-size: 28px;
            overflow: hidden; 
            /*margin-left: 50%; */  
        }

         .content2 .ipage2 {
           display: inline;
           margin-top: -40%;
           width: 30%;
           /*height: 320px;*/
           float: left;
           margin-left: 50px;
           overflow: hidden;
        
        }

        h2 {
            display:  block;
            text-align: center;
            margin-top:   100px;
            font-size: 48px;
            font-weight: bold;
            color: #550000;
        }

         .content3 {
            display: block;
            margin-top: 100px !important ;
            overflow: hidden;
        }
        

        .content3 .ipage3 {
            display: inline;
            margin-top: 15%;
            width: 25%;
            height: 13%;
            float: right;
            margin-right: 10%;     
             
         }
         
         .content3 .content-text3{
             display: inline-block;
             /*margin-top: -150px;
             margin-inline-start: 300px;*/
             /*width: 65%;*/
             font-size: 28px;
             overflow: hidden;
             margin-left: 50px;
     
         }
        
    

       

       
           
}