@media only screen and (max-width: 1024px)
{
.content-section-box
{
      width: 100%;
      height: auto;      
      margin-top: 20px;
      background-color: transparent;
}
.content-section-box
.box-container
{
      width: 95%;
      height: 70vh;  
      display: block;            
      margin: 0 auto;
      border-radius: 15px;
      background-color: #f9f9f9;
}
.content-section-box
.box-a
{
      padding: 10px 0;
}
.content-section-box
.box-a
h5
{          
      font-size: 16px;              
      font-weight: 900;                                                         
      margin-left: 15px;
}
.content-section-box
.box-b
{     
      width: 95%;
      height: auto;
}
.content-section-box
p
{              
      color: #222;
      font-size: 13px;      
      margin-top: 10px;
      font-weight: 500;                 
      margin-left: 15px;        
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-trigger
{
      width: 100%;
      height: auto;            
}
.content-section-trigger
.trigger-container
{      
      width: 100%;
      height: 85vh;            
}
.content-section-trigger
img 
{      
      width: 100%;
      height: 100%;            
      margin-top: 50px;      
      border-radius: 10px;        
}
.content-section-trigger
.trigger-background
{           
      width: 100%;
      height: 80vh;
      overflow: hidden;
      position: relative;
      visibility: hidden;
      clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);      

      transition-delay: 0.2s;
      transition: 1s ease-out;
}
}



@media only screen and (max-width: 1024px) 
{
.content-section-context
{
      width: 100%;
      height: auto;      
      margin-top: 0;
}
.content-section-context
.context-container
{
      width: 95%;
      height: auto;
      border: none;
      padding: 15px;                  
      background-color: #f9f9f9;
}
.content-section-context
.context-a 
{      
      width: 100%; 
      float: none;
      height: auto;
}
.content-section-context
h5
{              
      font-size: 20px;
      text-align: left;      
      padding-left: 10px;
}
.content-section-context
.context-b 
{      
      width: 100%; 
      float: none;
      height: auto;
}
.content-section-context
h6
{          
      font-size: 14px;
      text-align: left;      
}
.content-section-context
.context-c
{      
      width: 100%; 
      float: none;
      height: auto;
}
.content-section-context
.context-c
p
{          
      padding: 20px;
      font-size: 15px;      
      font-weight: 400;  
      padding-left: 10px;    
}
.content-section-context
.context-padding
{
      width: 100%;
      height: 50px;
}
}



@media screen and (max-width: 1024px)
{
.content-section-account
{
      width: 100%;
      height: auto;      
      margin: 0 auto;
      margin-top: 50px;
}
.content-section-account
.account-container 
{     
      width: 100%;
      height: 70vh;
      padding-top: 20px;
}
.content-section-account
img 
{      
      width: 100%;
      height: 60vh;      
      object-fit: cover; 
}
.content-section-account
h5
{        
      top: 5%;
      left: 10%;
      width: 95%;   
      height: 100%;      
      font-size: 50px;
}
.content-section-account:not(.no-js)
.account-background 
{          
      border-radius: 20px;      
}
}
@media only screen and (min-width: 1024px) and (max-width: 1440px)
{
.content-section-account
.account-container 
{     
      width: 100%;
      height: 80vh;
}      
.content-section-account
img 
{      
      width: 100%;
      height: 70vh;      
      object-fit: cover; 
}   
}



@media only screen and (max-width: 1024px)
{
.content-section-counter
{
      width: 100%;
      height: auto;      
}
.content-section-counter
.counter-container
{
      width: 95%;
      height: 400px;                  
}    
.content-section-counter    
.counter-box
{
      width: 50%;
      height: auto;
      padding: 10px 0;      
      border-right: none;
}
.content-section-counter
h5
{            
      padding: 5px;      
      font-size: 14px;                       
}
.content-section-counter
h6
{
      font-size: 30px;
}
.content-section-counter
img
{      
      width: 80px;
      height: auto;
}
}



@media only screen and (max-width: 1024px)
{
.content-section-brief
.brief-container
{
      width: 100%;
      height: auto;
      padding-top: 10px;      
}      
.content-section-brief
.brief-a
{
      width: 100%;
      float: none;
      height: auto;
}
.content-section-brief
.brief-b
{
      width: 100%;
      float: none;
      height: auto;
}
.content-section-brief
.brief-c
{
      width: 100%;
      float: none;
      height: auto;
}
.content-section-brief
img
{      
      width: 40%;
      float: none;
      height: auto;            
      margin-left: 40px;
}
.content-section-brief
span
{     
      float: right;      
      font-size: 15px;       
      padding: 10px 10px; 
}
.content-section-brief
h5
{      
      font-size: 15px;                      
      font-weight: 700;
}
.content-section-brief
h6
{            
      font-size: 15px;           
      padding: 10px 40px;
}
.content-section-brief
p
{          
      width: 80%;                 
      padding: 10px 0;
      font-size: 15px;      
}
.content-section-brief
hr
{                 
      width: 100%;            
}
}



@media only screen and (max-width: 1024px)
{
.content-section-mixing
{
      width: 100%;
      height: auto;      
}    
.content-section-mixing
.mixing-container
{	  
      width: 100%;
      height: 30vh;          
}
.content-section-mixing
.mixing-item
{
      width: 100%;       
}
.content-section-mixing
h5
{	  	
	top: 40%;            
      font-size: 100px;      
}
}
@media only screen and (min-width: 1024px) and  (max-width: 1440px)
{
.content-section-mixing
h5
{	  	
	top: 30%;            
      font-size: 150px;            
}  
}




@media screen and (max-width: 1024px) 
{
.content-section-content
{
      width: 100%;
      height: auto; 
}
.content-section-content
.content-container
{
      width: 100%;       
      height: auto;
      margin-top: 30px;
}    
.content-section-content
.content-a    
{
      width: 100%;
      height: auto;
}
.content-section-content
.content-article
{      
      width: 100%;
      height: auto;      
}
.content-section-content
h4
{     
      font-size: 20px;      
      padding: 20px 20px;
}
.content-section-content
i
{
      font-size: 15px;      
}
.content-section-content
h5
{        
      font-size: 12px;   
      padding: 5px 20px;   
      border-bottom: none;
}
.content-section-content
h6
{        
      font-size: 18px;      
      padding: 5px 20px;   
}
.content-section-content
p
{        
      font-size: 12px;      
      padding: 10px 20px;   
}
.content-section-content
.content-b
{
      width: 100%;
      height: auto;
}
.content-section-content
img
{      
      width: 50%;
      height: 50%;           
      padding-top: 20px;
      padding-left: 20px;
      border-radius: 0 10px 10px 0;
}
.content-section-content
.content-head
{    
     font-size: 15px;           
}
.content-section-content
.content-paragraph
{
     width: 80%;      
     font-size: 12px;      
     padding: 10px 20px;
}
.content-section-content
.content-c
{
      width: 100%;
      height: 35vh;      
}
.content-section-content
.content-overlay
{
      width: 100%;      
      margin-top: 100px;      
}
.content-section-content
.content-box
{               
      width: 100%;         
      padding: 10px;         
}
.content-section-content
.content-background
{      
      width: 150px;
      height: 150px;                              
}
.content-section-content
.content-box
img
{          
      width: 100%;
      height: 100%;      
}
}
@media only screen and (min-width: 1024px) and (max-width: 1800px) 
{
.content-section-content
.content-a    
{
      width: 33.33%;      
}
.content-section-content
.content-b
{
      width: 33.33%;      
}
.content-section-content
.content-c
{
      width: 33.33%;      
}
.content-section-content
img
{      
      width: 100%;
      height: 50%;                 
}     
.content-section-content
.content-paragraph
{
      width: 90%;      
      font-size: 12px;      
      padding: 10px 10px;
}     
}



@media only screen and (max-width: 400px)
{
.content-section-timeline
{
      width: 100%;
      height: auto;            
}
.content-section-timeline
.timeline-heading
{
      width: 80%;      
      text-align: center;
}
.content-section-timeline
.timeline-container
{       
      width: 90%;
      height: 140vh;                   
      margin: 0 auto;    
}
.content-section-timeline
.timeline-line
{      
      width: 100%;                                         
      background-color: transparent;
}
.content-section-timeline
.timeline-article
{     
      width: 100%;
      height: 180px;            
}
.content-section-timeline
h5
{
      font-size: 14px;
      color: #232323;
      padding: 5px 5px;
      text-align: left;      
      margin-top: -100px;                  
}
.content-section-timeline
h6
{ 
      width: 100%;          
      font-size: 30px;
      padding: 5px 5px;            
}
.content-section-timeline
p
{
      width: 100%;                 
      font-size: 12px;       
      padding: 5px 5px;             
}
.content-section-timeline
a
{
      width: 100%;                     
      font-size: 10px;              
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px) 
{
.content-section-timeline
.timeline-container
{       
      height: 120vh;                       
}
.content-section-timeline
.timeline-item 
{      
      width: 50%;      
}
}
@media only screen and (min-width: 1024px) and (max-width: 1900px) 
{
.content-section-timeline
.timeline-container
{          
      height: 60vh;    
}
.content-section-timeline
.timeline-item 
{      
      width: 20%;      
}
}



@media only screen and (max-width: 800px) 
{
.content-section-tabs
.swiper-container
{      
      width: 95%;
      height: 80vh;                   
      border-radius: 15px;              
}      
.content-section-tabs
.tabs-article
{          
      top: 14%;      
      right: 50%;          
      width: 100%;
      font-size: 30px;
      max-width: 100%;
      text-align: center;      
}
.content-section-tabs
.tabs-date
{          
      margin-bottom: 10px;            
}
.content-section-tabs
.tabs-heading
{      
      font-size: 15px;      
}
.content-section-tabs
.tabs-paragraph
{                
      width: 80%;         
      margin: 0 auto;
      font-size: 15px;   
      font-weight: 900;
      text-align: justify;      
}
}
@media only screen and (min-width: 768px) 
{
.swiper-slide::after 
{
      right: -30%;
      bottom: -8%;      
      height: 50%;      
      width: 240px;
      box-shadow: -230px 0 300px 20vw rgba(97, 97, 97, 0.7);
}
.tabs-article
{      
      top: 50%;      
      right: 30%;
      width: 310px;
      font-size: 11px;
      text-align: right;

      transform: translateY(-50%);
}
.tabs-date
{      
      font-size: 40px;
      margin-bottom: 0;
}
.swiper-pagination 
{
      display: flex;
}
.swiper-button-prev 
{
      top: 15%;      
      right: 5%;      
      left: auto;
      transform: rotate(90deg) translate(0, 10px);
}
.swiper-button-prev:hover 
{
      transform: rotate(90deg) translate(-3px, 10px);
}
.swiper-button-next 
{
      top: auto;      
      right: 5%;
      bottom: 15%;      
      transform: rotate(90deg) translate(0, 10px);
}
.swiper-button-next:hover 
{
      transform: rotate(90deg) translate(3px, 10px);
}
}



@media screen and (max-width: 1024px)
{
.content-section-thumbnails
{
      width: 100%;
      height: auto;
      background-color: #fff;
}    
.content-section-thumbnails
img
{      
      width: 80%;
      height: 100%;       
}        
} 
@media only screen and (min-width: 768px)
{
.content-section-thumbnails      
.thumbnails-container
{      
      grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 1024px) 
{
.content-section-thumbnails      
.thumbnails-container
{          
      grid-template-columns: repeat(4, 1fr);
}
}
@media only screen and (min-width: 1440px) 
{
.content-section-thumbnails      
.thumbnails-container
{
      width: 100%;      
      grid-template-columns: repeat(6, 1fr);      
}
}



@media screen and (max-width: 1024px) 
{
.content-section-client
{
      width: 100%;
      height: auto;      
}    
.content-section-client
.client-container
{      
      height: 80vh;
      border-radius: 5px;      
}
.content-section-client
.client-column
{      
      width: 50%;                        
      padding: 10px 10px;
}
.content-section-client
a
{               
      padding: 0px;      
      font-size: 11px;            
}
}