body {overflow:auto;overflow-x:hidden;font-family: 'Prompt', sans-serif;
    background: url('img/background/bg-content.jpg');
    max-width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}
/*::-webkit-scrollbar {
   width: 0px;
}*/
/*img*/

.imgRip { background-image: url('img/background/RIP.jpg');  
   
   max-width: 100%;height: 100vh;background-size: cover;background-repeat: no-repeat;
        
}
.imgCh { background-image: url('img/background/Back202007.jpg');  
   
   max-width: 100%;height: 100vh;background-size: cover;background-repeat: no-repeat;
        
}
.img33 { background-image: url('img/background/Lans.jpg');  
   
   max-width: 100%;height: 100vh;background-size: cover;background-repeat: no-repeat;
        
}
.imgwork {
   background-image: url('img/project/IMG_2772.JPG');
   max-width: 100%;
   height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
}
.imgperson {
   background-image: url('img/background/Back202001.jpg');
   width: 100%;
   height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}
.imglast {
   background-image: url('img/background/DJI_0150.JPG');
   max-width: 100%;
   height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
}
.imgpro {
   margin-top:20px;
   align-content:center;
   width:35%;
}
.bars1 {
   margin-top:40%;
   height:23ex;
   width:100%;
   color:white;
   background-color:rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6);
   animation:fs 2s;
 }
@keyframes fs {
   from {
       opacity:0;
       width: 0%;
   }


  to {
      opacity:1;
       width: 100%;
   }
}
@keyframes fo {
   from {
       opacity:0;
       margin-left:-20ex;
   }


  to {
      opacity:1;
      margin-left:5ex; 
   }
}
.fonts1 {
   font-family:'Khmer UI',sans-serif;
   color:#a8a8a8;
   font-weight:bold;
   margin-top:10px;
   margin-left:5ex;
   animation:fo 2s;
}




                                       /*/////////////////imgslied2///////*/
.bars2 {
   margin-top:40%;
   height:23ex;
   width:100%;
   color:white;
   background-color:rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6);
  
}
.vl {
   margin-top:-7ex;
   margin-left:55%;
   border-left: 2px solid #666;
   height: 100%;
}

    
                                       /*/////////////////imgslied2///////*/
                                  /*/////////////////imgslied3///////*/

.rowtr {
 display: -ms-flexbox; /* IE 10 */
 display: flex;
 -ms-flex-wrap: wrap; /* IE 10 */
 flex-wrap: wrap;
 padding: 0 4px;

}     
.columntr {
 margin-top:15ex;
 -ms-flex: 50%; /* IE 10 */
 flex: 50%;
 padding: 0 4px;
}
.columntr img {
 margin-top: 1ex;
 vertical-align: middle;
}
.fonts3 {
   margin-top:5ex;
   background-color:rgb(0, 0, 0); background: rgba(0, 0, 0, 0.8);
   color:white;

}
/*/////////////////imgslied3///////*/
/*img*/
/*font*/
.FontPro {
   font-weight:bold; 
   text-align:center;
   margin-top:15px;
   color:#0f5190;
   font-size:23px;
}
.FontCus {
   
   color:white;
}
.Fonttime {
    
   text-align:center;
   margin-top:15px;
   color:#0f5190;
   font-size:18px;
}
.FontyearR {
   color:#0f5190; 
   margin-left:30px;
   font-size:16px;
}
.FontyearL {
   color:#0f5190; 
   margin-left:-8ex;
   font-size:16px;
}
.FontContent {
   
   
   font-weight:bold; 
   color:#0f5190;
   font-size:23px;
   margin-top:5px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*font*/
/*footer*/
.ulf {
   margin-top:10px;
   list-style:none;
   color:whitesmoke;
}
.lifoot {
  font-size:14px;
}
.lifoot:hover {
  color:#fff4b7;
  cursor:pointer;
}
.bottombar {
   height:8vh;
   background-color:#0f5190;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   color:#a8a8a8;
}
/*footer*/
@media screen and (min-width: 300px) and (max-width:800px) { 
   .imglast {background-position-x: 20%;}
   .imgperson {background-position: center center;background-position-x: 44%;}
   .imgwork {background-position: center center;}
   .imgCh {background-position: center center;}

   
}                      
@media screen and (min-width: 800px) and (max-width:1400px) {
   .imgs2 {
        width:200px;
        height:15ex;

   }
   .midcol {
     margin-left:5ex

   }
   .rightcol {
  margin-left:-10ex; 
}
   .fonts2 {
       margin-top:-35ex;
       margin-left:50ex;
   }
   .imgCh {
     height:100vh;
   }
   .imgwork {
height:100vh;
   }
   .imgperson {
         height:100vh;
   }
   .imglast {
     height:100vh;
   }
   .rowbot1 {
   margin-top:30ex; margin-left:-10ex;
}
   .rowbot2 {
   margin-top:30ex; margin-left:0ex;
}
   .bars1 {
       margin-top:35%;
       height:25ex;
   }
   .bars2 {
        margin-top:35%;
       height:25ex;
   }
 

}
/*#anior{animation:iconani 1s;}*/
@keyframes iconani {
   0%{margin-top:150vh; opacity:0;}75% {opacity:0;} 
   
}
@keyframes barcontent1 {0%{opacity:0;}100%{opacity:1;} }
@keyframes londcontent1 {0%{ opacity:0;}100%{ opacity:1;} }
@keyframes anicarosal{0%{
        opacity:0;
   }50%{
         opacity:0;
   } 75%{
      
       opacity:1;
   }100%{
        
         opacity:1;
   }}
@keyframes map {
   0%{opacity:0; }25%{ opacity:0;}50%{opacity:1;}
}
@keyframes mapcon{
0%{opacity:0; margin-left:3% }
25%{opacity:0; margin-left:3% }
50%{opacity:0; margin-left:3% }
75%{opacity:0; margin-left:3% }
100%{opacity:1;}
}
@keyframes mapcon2{
0%{opacity:0; margin-left:-1% }
25%{opacity:0; margin-left:-1% }
50%{opacity:0; margin-left:-1% }
75%{opacity:0; margin-left:-1% }
100%{opacity:1;}
}
@keyframes Sunsine{0%{opacity:0; margin-top:18%;}25%{opacity:0; margin-top:18%;}50%{opacity:1;}}
@keyframes SunsineT{0%{opacity:0; margin-top:23%;}25%{opacity:0; margin-top:23%;}50%{opacity:1; margin-top:20%;}}
@keyframes glod1{0%{opacity:0; margin-top:23%;}25%{opacity:0; margin-top:23%;}50%{opacity:1; margin-top:20%;}}
#TLO{animation:mapcon2  2s;}
#LSHOP{animation:mapcon2 2s;}
#OFLO{animation:mapcon 2s;}
#RALO{animation:mapcon 2s;}
#mapping{animation:map 1.5s}