@media screen and (max-width: 1024px)
{
.content-section-error
{
      width: 100%;
      height: auto;      
}
.content-section-error
h1
{      
      font-size: 25px;      
}
}



@media screen and (max-width: 1024px)
{
.content-section-transition
{
      width: 100%;
      height: auto;      
}   
.content-section-transition
.transition-container 
{      
      width: 100%;
      height: 100%;       
      background-color: #f5f5f5;
}
.content-section-transition
span 
{          
      font-size: 12px;
      color: #232323;           
}
}



@media screen and (max-width: 1024px)
{
.content-section-header
{
      width: 100%;
      height: auto;
}      
.content-section-header
.header-box
{      
      width: 100%;
      height: 150px;
      display: block;
      padding: 10px 5px;                 
      background-color: #25387C;      
      border-radius: 0 0 20px 20px;
}
.content-section-header
.header-logo
a
{
      color: #fff;            
      padding: 10px;      
      font-size: 20px;      
      margin-top: -40px;
}
.content-section-header
i
{                
      color: #fff; 
      font-size: 14px;  
      padding: 5px 15px;
}
.content-section-header
.logo-mobile
{
      width: 50px;
      height: auto;
      padding: 5px;     
      display: block;
}
.content-section-header
.logo-background
{
      display: none;
}
.content-section-header
.header-option
{
      margin-top: 20px;
}
.content-section-header
h5
{
      display: none;
}
.content-section-header
.option-avatar
{
      display: none;
}
.content-section-header
.option-button
{          
      width: 50px;      
      height: 29px;
      margin-left: 35px;      
}
.content-section-header
.option-button::before
{      
      border: 2px solid #fff;
      border-top: 0px solid #fff;
      border-right: 0px solid #fff;
}
.content-section-header
input
{           
      font-size: 10px;      
      margin-top: 1px;     
}
input::placeholder 
{                
      color: #fff;           
}
.content-section-header
.download-button
{                             
      color: #444; 
      font-size: 10px;                    
      padding: 8px 8px;      
}
}



@media screen and (max-width: 800px)
{
.content-section-navigation
{      
      width: 100%;
      height: auto;      
      margin: 0 auto;
}   
.content-section-navigation
.navigation-container
{          
      width: 100%;                     
      background-color: #f9f9f9;            
}
.content-section-navigation
.navigation-box
{      
      width: 100%;
      display: block;            
      border-radius: 5px;            
}
.content-section-navigation
.navigation-box
{                     
      height: 50px;
      position: relative;         
}
.content-section-navigation
.navigation-box
.active
{
      color: #3457d5;
}
.navigation-list
{                 
      opacity: 0;     
      height: auto;         
      position: absolute;
      border-radius: 10px;
      pointer-events: none;      
      background-color: #fff;              
}
.content-section-navigation
.navigation-open
.button-hamburger
{      
      font-size: 20px;
      color: #232323;
}
.content-section-navigation
.navigation-open
.button-close
{      
      font-size: 20px;
      color: #232323;      
}
.content-section-navigation
.navigation-box
.navigation-button
{
      color: #232323;
}
.content-section-navigation
.navigation-box
.button-toggle
{           
      display: inline;
      position: relative;      
}
.content-section-navigation
.navigation-list
.navigation-dropdown:hover 
.dropdown-box
{               
      max-height: 800px;      
}
.content-section-navigation
.navigation-box
.navigation-part
{           
      display: block;      
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-title
{
      width: 100%;
      height: auto;           
      margin-top: 10px;
      background-color: #fff;  
}    
.content-section-title
.title-container
{     
      width: 100%;
      height: 200px;               
      padding: 10px 10px;        
}
.content-section-title
h5
{		       
      opacity: 1;
      color: #222;
      padding: 5px 0;      
      font-size: 60px;                  
      line-height: 0.8;
}
.content-section-title
h6
{                  
      opacity: 1;
      color: #222;
      margin: 1% 2%;    
      font-size: 12px;      
      padding: 30px 5px;      
}
.content-section-title
.title-paragraph::after 
{	    
      display: none;                    
}
}
@media only screen and (max-width: 370px) 
{
.content-section-title
h5
{		       
      font-size: 30px;                  
}
.content-section-title
h6
{                  
      font-size: 16px;            
}
}



@media only screen and (max-width: 1024px)
{
.content-section-carousel
{
      width: 100%;
      height: auto;
      background-color: #fff;  
}      
.content-section-carousel
.carousel-container
{
      width: 100%;
      height: 80vh;
      border-radius: 40px 40px 20px 20px;
}
.content-section-navigation
.navigation-box
.navigation-part
{
      width: 100%;
      height: 100%;      
      column-gap: 0;
      border-radius: 20px;      
}
.content-section-carousel
.carousel-checkbox
{          
      width: 98%;
      bottom: 2%; 
      height: auto;            
      border-radius: 20px;      
}
.content-section-carousel
.carousel-checkbox
ul
li
{
      width: 50%;
      height: auto;      
      padding: 10px;                       
      border-right: none;   
}
.content-section-carousel
.checkbox-b
{
      border-right: none;  
}
.content-section-carousel
h5
{                      
      color: #000;
      font-size: 10px;                                 
      padding-top: 10px;      
}
.content-section-carousel
span
{                      
      font-size: 12px;                       
}
.content-section-carousel
.carousel-checkbox
{                
      backdrop-filter: blur(2.7px);
      -webkit-backdrop-filter: blur(2.7px);
      background: rgba(255, 255, 255, 0.09);      
}
.content-section-carousel
.carousel-checkbox
h5
{        
      color: #fff;            
      font-size: 18px;            
      padding-top: 10px;      
}
.content-section-carousel
.carousel-checkbox
span
{     
      color: #fff;                             
      font-size: 14px;     
}
.content-section-carousel
.carousel-checkbox
img
{          
      width: 50px;
      height: auto;                  
      margin-right: 10px;            
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-scroll
{
      width: 100%;
      height: auto;       
}
.content-section-scroll
.scroll-container
{
      left: -10px;
      width: 50px;      
      height: 180px;      
      position: relative;      
}
.content-section-scroll
.scroll-article
{            
      padding: 18px;      
}
.content-section-scroll
h5
{           
      font-size: 11px;      
      letter-spacing: 1px;      
}
.content-section-scroll
.scroll-span
{          
      width: 5px;
      height: 25px;                 
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-tag
{
      width: 100%;
      height: auto;       
}
.content-section-tag
.tag-container
{
      width: 100%;
      height: 80px;      
      padding: 5px 5px;      
}
.content-section-tag
p
{                
      padding: 2px;	       
      font-size: 14px;       
}
.content-section-tag
a
{             
      font-size: 14px;       
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-span
{
      width: 100%;
      height: auto;      
}
.content-section-span
.span-container
{     
      width: 90%;
      height: auto;      
}
.content-section-span
h5
{          
      font-size: 14px;            
      padding: 4px 4px;                            
}
.content-section-span
h6
{          
      width: 150px;
      font-size: 14px;                  
      padding: 4px 4px;                
}
}


@media only screen and (max-width: 1024px) 
{
.content-section-spam
{
      width: 100%;
      height: auto;      
}
.content-section-spam
.spam-container
{     
      width: 90%;
      height: auto;      
}
.content-section-spam
h5
{          
      font-size: 14px;            
      padding: 4px 4px;                            
}
.content-section-spam
h6
{          
      width: 150px;
      font-size: 14px;                  
      padding: 4px 4px;                
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-video
{
      width: 100%;
      height: auto;      
}
.content-section-video
.video-container
{  
      width: 100%;
      height: auto;      
      perspective: 200px;      
}
.content-section-video
.video-box
{     
      width: 95%;   
      height: 80vh;
      overflow: hidden;
      position: relative;      
}
.content-section-video
.video-box > * 
{
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;      
}
.content-section-video
.video-heading
{          
      align-items: center;
      justify-content: center;      
      transform: translate3D(0px, 0, 0);            
}
.content-section-video
.video-span
{         
      display: block;
      font-size: 40px;      
      line-height: 40px;              
      letter-spacing: -2px;            
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-map
.map-container
{      
      width: 100%;
      height: auto;                  
}
.content-section-map
.map-box
{      
      width: 95%;
      height: auto;      
      border-radius: 10px 10px 0 0;          
}
.content-section-map
.map-canvas
{
      height: 100vh;      
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-foot
{
      width: 100%;             
      height: auto;                                       
}
.content-section-foot
.foot-container
{
      width: 95%;          
      height: 40vh;              
      display: flex;      
      border-radius: 10px;      
}
.content-section-foot
img
{
      width: 40%;
      height: auto;                  
}
.content-section-foot
.foot-button
{         
      margin: 50px 0;
      position: relative;      
}
.content-section-foot
a
{            
      font-size: 12px;      
      padding: 4px 8px;                
      border-radius: 12px;                        
     
      transition: all 0.5s ease;
}
.content-section-foot
i
{
      font-size: 12px;            
}
}



@media screen and (max-width: 1024px)
{
.content-section-footer
{
      width: 100%;
      height: auto;      
}
.content-section-footer
h4
{      
      width: 97%;      
      font-size: 40px;      
}
.content-section-footer
.footer-container
{
      width: 95%;
      height: auto;      
}
.content-section-footer
ul
{
      width: 100%;      
      height: auto;
}    
.content-section-footer    
.footer-a
{
      width: 100%;
      height: 25vh;
}
.content-section-footer
.footer-a
ul
{    
      margin: 8px 2%;
}
.content-section-footer
.footer-a
li
{    
      margin: 8px 2%;
}
.content-section-footer
.footer-a
h5
{           
      font-size: 12px;
}
.content-section-footer
.footer-c
{
      width: 100%;
      height: 40vh;
}
.content-section-footer
.footer-c
li 
{    
      margin: 8px 4%;
}
.content-section-footer
.footer-c
h5
{           
      font-size: 12px; 
      padding-top: 5px;                         
}
}
@media only screen and  (min-width: 1024px) and (max-width: 1900px)
{
.content-section-footer
h4
{      
      width: 97%;      
      font-size: 100px;
}
}



@media only screen and (max-width: 1024px)
{
.content-section-copyright
{      
      width: 100%;
      height: auto;                  
}
.content-section-copyright
.copyright-container
{
      width: 95%;
      height: auto;           
}
.content-section-copyright
.copyright-article
{
      padding: 40px 10px;
}
.content-section-copyright
h4
{
      font-size: 12px;
}
.content-section-copyright
h5
{      
      font-size: 12px;    
}
.content-section-copyright
h6
{              
      font-size: 12px;    
}
.content-section-copyright
.copyright-paragraph
{
      width: 100%;
      height: 5vh;      
}
.content-section-copyright
li
{
      font-size: 10px; 
}
.content-section-copyright
.copyright-a
{
      padding: 5px 10px;
}
.content-section-copyright
.copyright-b
{
      float: none;
      padding: 5px 10px;
}
}