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


*{

 /* border: 1px solid red;  */
box-sizing: border-box;
padding: 0;
margin: 0;

}


img{
    position: relative;
    float:left;
}



html{

    font-size: 16px;
    font-family: 'Kanit', sans-serif;
}

a{

    font-family: 'Kanit', sans-serif;
    text-decoration: none;

}

main{

    width: 100%;
    height:auto;
    /* background-color: #090951; */
    background-color: #05052f;
    float:left;
    overflow: hidden;
}


.logo{

height: 50px;
margin-left: 1rem;
top:10px;
/* display: none; */
opacity: 0;
transition: opacity 0.5s ease-in-out;

}

@media only screen and (max-width:650px){
    
    .logo{
       display: none;
    }

}

footer{
    width: 100%;
    height: 200px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #020218;
    color: #FF5C2E; /*FF5C2E*/
}
/*  ///////////////////////  */

.mainNav{

    width: 100%;
    height: 80px;
    background-color: #FF5C2E;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #6d171a;;
    }

    
    .mainNav li{
        position: relative;
        float:right;
        display: inline-block;
        margin-right: 2rem;
        top:15px;
       
    }
    
    .mainNav li a{
       color:#05052f
    }

    .mainNav li a:hover{
        color:#ffffff
     }

    .mainNav a{
    
       font-size: 1.75rem;
    }
    

    @media only screen and (max-width:650px){
    
        .mainNav ul{

            /* transform: translate(50%); */
            position: relative;
            right: 50%;
            transform: translateX(50%);
            float:right;
            padding-left: 2rem;
            
           
        }



        .mainNav li{
           
            top:20px;

            
           
        }

        .mainNav a{
    
            font-size: 1.5rem;
         }


         .mainNav div{
           border: 1px solid red;
           left:0px;
         }
    
    }

/*  ///////////////////////  */

header{
    width: 100%;
    height: auto;
    overflow: hidden;
}

.hero{
    width: 100%;
    /* height: 4rem; */
    height: 600px;
    background-color: #0A0A3A;
    overflow: hidden;
}





.hero video{
    /* width:auto;
    height: 100%; */

    width: auto;
    height: 100%;
    margin: 0 auto;
    left:50%;
    position: relative;
    transform: translateX(-50%);
}


.video2{

    opacity: 0.8;
    border: 10px solid green;
    left: 40px;
}


.mask{
overflow: hidden;
width: 100%;
height: 600px;
position: absolute;
z-index: 1;
left:0px;
top:0px;
}

.mask img{
    height: 110%;
    width: auto;
    position: relative;
    left:50%;
    transform: translateX(-50%);

}




/*  ///////////////////////  */

.tilesGrid{
     max-width: 1500px;
     margin: 6rem auto;
     padding: 0 2rem;


     display: grid;
     grid-template-columns: repeat(12, 1fr);
     /* grid-template-rows: repeat(2, 1fr) ; */
     grid-column-gap: 2rem;
     grid-row-gap: 2rem;
     align-content: space-around;
     grid-auto-rows: minmax(30px, auto);
  
}

@media only screen and (max-width:570px){
    
    .hero{
        height: 300px;
    }

    .mask{
        width: 100%;
        height: 350px;
    }
    .mask img{
        height: 90%;   
    }
    

    .tilesGrid{
        padding: 0 1.5rem;
        margin: 3rem auto;
   }
   


}



/* .tilesGrid  */
.c1{
    grid-column: 1/4;
    /* height: 
    300px; */
    border-radius: 30px;
    overflow: hidden;
}


.c1 img{
    width: 105.5%;
}

.tilesGrid .c2{
    grid-column: 4/10;
    overflow: hidden;
    border-radius: 30px;
}

.c2 video{
    width: 100%;
    
    display: block;
  
}

.tilesGrid .c3{
    grid-column: 10/13;
    grid-row: 1/3;
    background-color: #090951;
    border-radius: 30px;
    overflow: hidden;
    padding: 2rem;

}


.c3 h1{
    text-transform: uppercase;
    color: #FF5C2E;
    text-align: left;
    margin: 2rem auto;
    padding: 0, 2rem;
    font-weight: 100;
    font-size: 3rem;
    line-height: 3rem;


}


.c3 h2{
    text-transform: uppercase;
    color: #FF5C2E;
    text-align: left;
    margin: 2rem auto;
    padding: 0, 2rem;
    font-weight: 100;
    font-size: 1.6rem;
    line-height: 3rem;


}

.c3 span{

    color: #ffffff;



}



.tilesGrid .c4{
    grid-column: 1/7;
    border-radius: 30px;
    overflow: hidden;
}

.c4 video{
    width: 100%;
  
    display: block;
  
}

.tilesGrid .c5{
    grid-column: 7/10;
    border-radius: 30px;
    overflow: hidden;
}

.c5 img{
    width: 105.5%;
}


.tilesGrid .c6{
    grid-column: 1/4;
    border-radius: 30px;
    overflow: hidden;
}
.c6 img{
    width: 105.5%;
}

.tilesGrid .c7{
    grid-column: 4/10;
    border-radius: 30px;
    overflow: hidden;
    border-radius: 30px;
}

.c7 video{
    width: 100%;
    overflow: hidden;
    display: block;
   
}



.tilesGrid .c8{
    grid-column: 10/13;
    background-color: #090951;
    border-radius: 30px;
    overflow: hidden;
}

.c8 img{
    width: 100%;
}


@media only screen and (max-width:650px){
    
    .tilesGrid{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* grid-template-rows: (5, 10px); */
        /* grid-template-rows: repeat(auto, 1fr) ; */
        grid-column-gap: 1rem;
        grid-row-gap: 2rem;
        grid-auto-rows: min-content;
   }


   .tilesGrid  .c1{
       
    grid-column: 1/10;
    border-radius: 15px;
    overflow: hidden;
   
    }

    .tilesGrid .c2{
        grid-column: 1/10;
        border-radius: 15px;
        overflow: hidden;
   
    }

    .tilesGrid .c3{
        grid-column: 1/10;
        grid-row: 3/4;
        background-color: #090951;
        border-radius: 15px;
        overflow: hidden;
        padding: 2rem;
        /* display: none; */
    
    }
    
    .tilesGrid .c4{
        grid-column: 1/7;
        display: none;
    }

    .tilesGrid .c5{
        grid-column:1/10;
        border-radius:15px;
        overflow: hidden;
   
    }

    .tilesGrid .c6{
        grid-column: 1/10;
        border-radius: 15px;
        overflow: hidden;
   

    }

    .tilesGrid .c7{
        grid-column: 1/10;
        border-radius: 15px;
        overflow: hidden;

    }
    
    .tilesGrid .c8{
        grid-column: 1/10;
        background-color: #090951;
        border-radius: 15px;
        overflow: hidden;
       
    }
    
}


/*  ///////////////////////  */

@media only screen and (min-width:651px)and (max-width:1400px){
    
    .tilesGrid{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* grid-template-rows: (5, 10px); */
        /* grid-template-rows: repeat(auto, 1fr) ; */
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
        grid-auto-rows: min-content;
   }


   .tilesGrid  .c1{
       
    grid-column: 1/6;
    border-radius: 15px;
    overflow: hidden;
   
    }

    .tilesGrid .c2{
        grid-column: 6/13;
        border-radius: 15px;
        overflow: hidden;
   
    }

    .tilesGrid .c3{
        grid-column: 1/6;
        grid-row: 2/4;
        background-color: #090951;
        border-radius: 15px;
        overflow: hidden;
        padding: 2rem;
    
    }
    
    .tilesGrid .c4{
        grid-column: 6/13;
        grid-row: 2/2;
        border-radius:100px;
        border-radius: 15px;
    }

    .tilesGrid .c5{
        grid-column: 6/13;
        grid-row: 3/4;
        border-radius:15px;
        overflow: hidden;
   
    }

    .tilesGrid .c6{
        grid-column: 1/7;
        border-radius: 15px;
        overflow: hidden;
        grid-row: 4/5;

    }

    .tilesGrid .c7{
        grid-column: 1/13;
        border-radius: 15px;
        overflow: hidden;
        grid-row: 5/6;
      
    }
    
    .tilesGrid .c8{
        grid-column: 7/13;
        background-color: #090951;
        border-radius: 15px;
        overflow: hidden;
        grid-row: 4/5;
       
    }
    
}


/*  ///////////////////////  */
/*  ///////////////////////  */

.claim{

width: 100%;
height: auto;
background-color: #FF5C2E;
padding: 2rem 2rem;
text-align: left;
overflow: hidden;

}


.claim h1{
    text-transform: uppercase;
    color: #240405;
    max-width: 1500px;
    text-align: left;
    margin: 2rem auto;
    padding: 0, 2rem;
    font-weight: 100;
    font-size: 4.5rem;
    line-height: 4rem;

}

.claim h1 span{
    font-weight: 400;
}


@media only screen and (max-width:650px){
   
    
    .claim h1{
        font-size: 3rem;

    }
       
    }
/*  ///////////////////////  */

.sponsors{
    /* width: 100%; */
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    
    max-width: 1500px;
    margin: 2rem auto;
    padding: 4rem 2rem 4rem 2rem;
    overflow: hidden;

    

}

.sponsors h1{
text-transform: uppercase;
 color: #FF5C2E;
 font-weight: 400;
 font-size: 3rem;
 line-height: 4rem;

}
.sponsors h2{

    color: #f0f0f0;
    font-weight: 200;
    font-size: 1.7rem;

   }

   @media only screen and (max-width:650px){

    .sponsors h1{
         font-size: 2rem;
        }

        .sponsors h2{
            font-size: 1.2rem;
        }

   }
.sponsors a{

width: 100%;

}   


.sponsors a:hover{

    width: 100%;
   opacity: 0.6;
}   


.imgSponsor{

width: 100%;

}

.spLogo{
width: 140px;
height: 100px;
margin: 2rem;

display: flex;
justify-content:center;
align-items: center;


}

.spLogo img{
  /* max-width: 140px;
  max-height: 100px;   */
  margin:0 auto;   
  }


.titleSpon{
    
    flex-basis: 100%;
    height: auto;
    margin-bottom: 2rem;

   text-align: center;
}