@media screen and (max-width: 800px)
{
.content-section-caption
{
      width: 100%;
      height: auto;      
}
.content-section-caption
.caption-container
{      
      width: 95%;      
      height: 100px;            
}
.content-section-caption
h4
{           
      font-size: 12px;            
}
.content-section-caption
.caption-paragraph
{
      
      width: 100%;            
      height: 40px;                  
}
.content-section-caption
h5
{          
      font-size: 12px; 
}
.content-section-caption
span
{                       
      float: right;            
      font-size: 12px;            
}
}



@media screen and (max-width: 800px)
{
.content-section-timeline
{
      width: 100%;
      height: auto;      
}
.content-section-timeline
.timeline-container
{
      width: 95%;
      height: auto;            
      padding: 5px 0 0 32px;            
}      
.content-section-timeline
.timeline-flex
li
{      
      margin-left: 20px; 
}
.content-section-timeline
.timeline-flex
h4
{
      font-size: 18px;            
}
.content-section-timeline
.timeline-flex
span
{
      font-size: 18px;      
}
.content-section-timeline
.flex-background
{
      width: 150px;      
}
.content-section-timeline
.timeline-box
{          
      width: 100%;  
      height: auto;            
}
.content-section-timeline
.timeline-item
{                 
      width: 35px;      
}
.content-section-timeline
h4
{            
      padding-top: 0;
      font-size: 12px;                 
}
.content-section-timeline
h5
{      
      font-size: 12px; 
      padding-top: 15px;             
}
.content-section-timeline
.timeline-box
p
{           
      font-size: 12px;      
      padding-top: 10px;             
}
.content-section-timeline
h6
{
      color: #444;      
      font-size: 14px;                 
      padding-top: 20px;
}
.content-section-timeline
.timeline-article
p
{     
      font-size: 12px;  
      padding-top: 5px;    
}
.content-section-timeline
span
{          
      font-size: 12px;                      
}
.content-section-timeline
svg
{     
      width: 15px;
      height: auto;           
}   
.content-section-timeline
.timeline-context
{
      width: 90%;
      height: 100px;
      margin-top: 20px;                  
}
.content-section-timeline
.timeline-context
p
{     
      width: 100%;      
      font-size: 12px;        
}
}




@media screen and (max-width: 1000px) 
{
.content-section-package
{
      width: 100%;
      height: auto;      
}
.content-section-package
.package-container
{
      width: 90%;
      height: auto;      
}
.content-section-package
.package-aritlce
{
      width: 100%;
      height: auto;
      margin-top: 20px;
}
.content-section-package
h5
{
      font-size: 20px;      
}
.content-section-package
p
{
      width: 100%;
      padding: 5px 0;
      font-size: 14px;      
}    
}



@media screen and (max-width: 1200px)
{
.content-section-circle
{
      width: 100%;
      height: auto;
      margin-top: 10px;      
}
.content-section-circle
.circle-container
{
      width: 90%;
      height: auto;
      margin: 0 auto;      
      padding: 30px 0;
      background-color: transparent;
}      
}
@media screen and (min-width: 1440px) 
{
.content-section-circle
.circle-container
{       
      height: auto;    
      grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width: 1900px) 
{
.content-section-circle    
.circle-container
{      
      height: 30vh;    
      grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (max-width: 640px)
{
.content-section-circle
.circle-container
{      
      width: 100%;
      height: auto;         
      padding: 20px 10px;     
}
.content-section-circle
.circle-item
{
      width: 25%; 
      float: right;      
}
}



@media screen and (max-width: 1200px)
{
.content-section-description
{
      width: 100%;
      height: auto;
      margin-top: 50px;      
}      
.content-section-description
.description-container
{          
      width: 100%;
      height: auto; 
} 
.content-section-description
h4
{
      padding: 0 30px;    
      font-size: 12px;       
}
.content-section-description
.description-grid
{
      width: 95%;      
      margin: 0 auto;
}
.content-section-description
.description-aritlce
{
      width: 100%;      
      height: auto;                    
      padding-top: 20px;
}
.content-section-description
h5
{      
      font-size: 12px;            
      margin-top: 5px;
}
.content-section-description
h6
{      
      font-size: 10px;                  
}
.content-section-description
svg
{      
      width: 20px;
      height: auto;      
      margin: 5px 5px;    
}
}



@media screen and (max-width: 768px) 
{
.content-section-directory
{
      width: 100%;
      height: auto;
      margin-top: 20px;      
}
.content-section-directory
.directory-container
{
      width: 95%; 
      height: auto;   
      margin: 0 auto;  
}
.content-section-directory
h5
{          
      font-size: 15px;      
      padding: 5px 10px;           
}
.content-section-directory
.directory-list
{      
      width: 100%;
      height: auto;
      display: block;      
}
.content-section-directory
li
{          
      padding-left: 10px;
}
.content-section-directory
svg
{
      width: 10px;            
}
.content-section-directory
a
{          
      font-size: 14px;      
}
.content-section-directory
.directory-a,
.content-section-directory
.directory-b,
.content-section-directory
.directory-c
{
      width: 100%;
}
}
@media (min-width: 769px) and (max-width: 1400px)
{
.content-section-directory
.directory-container
{
      width: 70%;
      height: auto;      
}  
.content-section-directory
.directory-a,
.content-section-directory
.directory-b,
.content-section-directory
.directory-c
{
      width: 40%;
}
}



@media screen and (max-width: 800px)
{
.content-section-break
{
      width: 100%;
      height: auto;      
}
.content-section-break
.break-container
{
      width: 95%;
      height: auto;
      margin: 0 auto 0;
      border-radius: 20px;      
}
.content-section-break
h5 
{      
      font-size: 12px;
      font-weight: 700;
      padding: 15px 15px;
}
.content-section-break
.break-list
{     
      padding: 5px 5px;      
}
.content-section-break
p 
{          
      padding: 5px 10px 40px;
}
.content-section-break
a 
{      
      font-size: 30px;  
      text-indent: 10px; 
}
.content-section-break
a:after 
{
      
      width: 12px;      
      height: 12px;                  
      border-right: 2px solid #222;
      border-bottom: 2px solid #222;      
}
.content-section-break
p 
{          
      width: 100%;
      font-size: 14px;            
}
}



@media screen and (max-width: 768px) 
{
.content-section-box
{
      width: 100%;
      height: auto;
      margin-top: 20px;      
}
.content-section-box
.box-container
{
      width: 90%;
      height: 80vh;      
}
.content-section-box
h5
{      
      font-size: 12px;      
}
.content-section-box
span
{      
      font-size: 12px;      
}
.content-section-box
img
{
      width: 100%;
      height: 80%;          
      margin-top: 5px;                    
}      
}