@media screen and (max-width: 440px) 
{
.content-section-navigation
{
      width: 100%;
      height: auto;
}      
.content-section-navigation     
.navigation-container
{         
      width: 100%;	  	
      height: auto;
}	
.content-section-navigation
.navigation-box
{           
	  width: 15%;
      float: left; 
      height: 50px;	
      margin-left: 15px;
      border-radius: 20px;
      background-color: #242424;                  
}
.content-section-navigation 
.navigation-logo
{     
      left: 0%;
      width: 100%;
      height: auto;      
      padding: 0 0;      
      margin-top: -60px;
}
.content-section-navigation
.navigation-logo
img
{
	width: 80px;
	height: auto;	                  
}
.content-section-navigation
.navigation-list
{     
      top: 0;	      
      width: 60%;
      left: -100%;
	height: 100vh;
      padding: 30% 0;      
	display: block;
	position: fixed;      
	overflow-y: auto;	  	
      border-radius: 0 15px 0 0;
      background-color: #191b24;            

      transition: all 0.3s ease;
}
.content-section-navigation
.navigation-button
{
      display: block;
}
.content-section-navigation
li
{
      width: 100%;      
      height: auto;               
      text-align: start;
}
.content-section-navigation
a
{            
      color: #fff;
      display: block;	  
      font-size: 14px;    
      margin-top: 10px;
      padding: 5px 30px;            
      text-transform: capitalize;        
}
.content-section-navigation
a:hover
{
	color: #ccc;      
      background-color: transparent;
}
.content-section-navigation
.navigation-dropdown
{      
      opacity: 1;
      top: 65px;	      
      max-height: 0;
      overflow: hidden;
	position: static;   
      box-shadow: none;	           	  
  	visibility: visible;	              

      transition: all 0.3s ease;
}
.content-section-navigation
.navigation-dropdown
a
{       
	font-size: 12px;
	font-weight: 700;	  	  
      margin-left: 10px;
      padding-top: 10px;     
      text-transform: capitalize;
}
.content-section-navigation
.navigation-dropdown
li 
a
{
      font-size: 12px;	        
}
.content-section-navigation
.navigation-hidden
{
      display: none;
}
.content-section-navigation
.navigation-open
{	      
      display: block;
	cursor: pointer;      
      font-size: 12px;	        
      color: #91d17d; 	
      font-weight: 700;	       
      padding: 5px 25px;

      transition: all 0.3s ease;
}
.content-section-navigation
.navigation-open:hover
{
	color: #242526;
      background-color: transparent;
}
.content-section-navigation
li
{
      margin: 0;	  
}
.content-section-navigation
.navigation-dropdown
a
{      
      font-size: 18px;	  
}
.content-section-navigation
i
{	    	  
      left: 31px;
      color: #fff;
      font-size: 25px;	
      margin-top: 12px;         
      position: absolute;
}
.content-section-navigation
.navigation-button
{      
      font-size: 15px;      
}
.content-section-navigation
.navigation-button.navigation-closed
{      
      top: 8px;
      left: -0px;      
      font-size: 25px;	      
      position: absolute;
}
#navigation-menu:checked ~ .navigation-list
{
      left: 0%;
}
#navigation-menu:checked ~ .navigation-button.navigation-menu
{
      display: none;
}
#navigation-closed:checked ~ .navigation-button.navigation-menu
{
      display: block;
}
#navigation-checked:checked ~ .navigation-dropdown
{
      max-height: 100%;
}
.content-section-navigation
.navigation-option
{           
      left: 3px;
      display: flex;    
      position: absolute;
}
.content-section-navigation
.navigation-option
a
{         
      margin: 5px;            
      font-size: 10px;            
}
}
@media (min-width: 440px) and (max-width: 900px)
{
.content-section-navigation
{
      width: 100%;
      height: auto;
}      
.content-section-navigation     
.navigation-container
{         
      width: 100%;	  	
      height: auto;
}	
.content-section-navigation
.navigation-box
{           
	width: 15%;
      float: left; 
      height: 50px;	
      margin-left: 15px;
      border-radius: 20px;
      background-color: #242424;                  
}
.content-section-navigation 
.navigation-logo
{     
      left: 0%;
      width: 100%;
      height: auto;      
      padding: 0 0;      
      margin-top: -60px;
}
.content-section-navigation
.navigation-logo
img
{
	width: 80px;
	height: auto;	                  
}
.content-section-navigation
.navigation-list
{     
      top: 0;	      
      width: 25%;
      left: -100%;
	height: 100vh;
      padding: 30% 0;      
	display: block;
	position: fixed;      
	overflow-y: auto;	  	
      border-radius: 0 15px 0 0;
      background-color: #191b24;            

      transition: all 0.3s ease;
}
.content-section-navigation
.navigation-button
{
      display: block;
}
.content-section-navigation
li
{
      width: 100%;      
      height: auto;               
      text-align: start;
}
.content-section-navigation
a
{            
      color: #fff;      
      display: block;	        
      font-size: 14px;          
      padding: 10px 30px;                  
      text-transform: capitalize;        
}
.content-section-navigation
a:hover
{
	color: #ccc;      
      background-color: transparent;
}
.content-section-navigation
.navigation-dropdown
{      
      opacity: 1;
      top: 65px;	      
      max-height: 0;
      overflow: hidden;
	position: static;   
      box-shadow: none;	           	  
  	visibility: visible;	              

      transition: all 0.3s ease;
}
.content-section-navigation
.navigation-dropdown
a
{       
	font-size: 12px;
	font-weight: 700;	  	  
      margin-left: 10px;
      padding-top: 10px;     
      text-transform: capitalize;
}
.content-section-navigation
.navigation-dropdown
li 
a
{
      font-size: 12px;	        
}
.content-section-navigation
.navigation-hidden
{
      display: none;
}
.content-section-navigation
.navigation-open
{	      
      display: block;
	cursor: pointer;      
      font-size: 12px;	        
      color: #91d17d; 	
      font-weight: 700;	       
      padding: 5px 30px;

      transition: all 0.3s ease;
}
.content-section-navigation
.navigation-open:hover
{
	color: #242526;
      background-color: transparent;
}
.content-section-navigation
li
{
      margin: 0;	  
}
.content-section-navigation
.navigation-dropdown
a
{      
      font-size: 18px;	  
}
.content-section-navigation
i
{	    	  
      left: 33px;
      color: #fff;
      font-size: 25px;	
      margin-top: 15px;         
      position: absolute;
}
.content-section-navigation
.navigation-button
{      
      font-size: 15px;      
}
.content-section-navigation
.navigation-button.navigation-closed
{      
      top: 8px;
      left: -0px;      
      font-size: 25px;	      
      position: absolute;
}
#navigation-menu:checked ~ .navigation-list
{
      left: 0%;
}
#navigation-menu:checked ~ .navigation-button.navigation-menu
{
      display: none;
}
#navigation-closed:checked ~ .navigation-button.navigation-menu
{
      display: block;
}
#navigation-checked:checked ~ .navigation-dropdown
{
      max-height: 100%;
}
.content-section-navigation
.navigation-option
{           
      left: 5px;
      display: flex;    
      position: absolute;
}
.content-section-navigation
.navigation-option
a
{         
      margin: 5px;            
      font-size: 10px;            
}
}




@media screen and (max-width: 768px) 
{
.content-section-tag
{
	width: 100%;
	height: auto;      
}
.content-section-tag
.tag-container
{
	width: 100%;
	height: auto;	
      display: flex;       
      padding-top: 10px;
      align-items: center;
      justify-content: center;
}
.content-section-tag
ul
{	  	  
	margin: 0 0; 
      display: flex;
}
.content-section-tag
li
{	  	  
	width: 100px;	  
      height: auto;	    
      background-color: #fff;  
}
.content-section-tag
.tag-button
{	     	  
	font-size: 15px;	  	
}
.content-section-tag
img
{
	width: 25px;
      margin: 2px;
	height: auto;	  
}
.content-section-tag
.tag-container
i
{	  	  
      font-size: 10px;  	  
	padding: 15px 5px;
	
	transition: all 0.25s ease-out;
}
}



@media screen and (max-width: 768px) 
{
.content-section-span
{
	width: 100%;
	height: auto;	  
}
.content-section-span
.span-container
{
      width: 100%;
      height: auto;	        	  	  
}
.content-section-span
h5
{      
      font-size: 45px;  
}
.content-section-span
h6
{      
      font-size: 15px;            	  
}
.content-section-span
p
{      
      font-size: 15px; 	  
}
.content-section-span
span 
{
	  font-size: 15px;       
}
}



@media screen and (max-width: 768px)
{
.content-section-horizontal
{
      width: 100%;
      height: auto;      
}
.content-section-horizontal
.horizontal-container
{
      width: 100%;
      height: 8vh;        
}
.content-section-horizontal
img
{
      width: 60px;      
      height: auto;      
}
}


@media screen and (max-width: 1000px)
{
.content-sectio-path
{
      width: 100%;
      height: 5vh;
      background-color: transparent;
}    
.content-sectio-path
.path-container
{
      left: -15%;      
      width: 100%;      
      position: absolute;
}
.content-sectio-path
h3
{      
      font-size: 40px;             
}
.content-sectio-path
span
{
      font-size: 30px;      
}
}



@media screen and (max-width: 1000px)
{
.content-section-card
{
      width: 100%;
      height: auto;
      background-color: transparent;
}      
.content-section-card
.card-container
{          
      width: 100%;
      height: auto; 
      display: block;
}
.content-section-card
.card-box
{          
      height: auto;      
}
.content-section-card
.card-item
{      
      width: 100%;
      height: 20vh;       
      margin: 0 auto;
} 
}
@media (min-width: 1440px) and (max-width: 1900px) 
{
.content-section-card
.card-box
{                 
      width: 90%; 
      padding: 5% 2%;      
} 
.content-section-card
.card-item
{      
      width: 220px;      
}
}
@media screen and (min-width: 768px) 
{
.content-section-card      
.card-box
{
      height: 70vh;      
      display: grid;
      grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1024px) 
{
.content-section-card      
.card-box
{
      grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width: 1440px) 
{
.content-section-card      
.card-box
{
      height: 40vh;            
      grid-template-columns: repeat(10, 1fr);
}
}



@media screen and (max-width: 800px)
{
.content-section-grid
.grid-heading
h5
{      
      font-size: 45px;       
}
.content-section-grid
.grid-heading
h6
{      
      font-size: 15px;       
}
.content-section-grid
.grid-container
{
      width: 100%;
      height: auto;                
}
.content-section-grid
.grid-box
{
      gap: 2px;
      width: 90%;
      height: auto;
      padding: 2px;          
      margin-top: 20px;
      grid-template-columns: repeat(2, 1fr);
}
.content-section-grid
.grid-item
{      
      height: 150px;      
      max-height: 250px;      
}
.content-section-grid
img
{      
      width: 100%;
      height: 100%;      
}
}
@media screen and (min-width: 800px) 
{
.content-section-grid
.grid-container
{
      width: 100%;
      height: auto;                    
}      
.content-section-grid
.grid-box
{      
      width: 90%;
      height: auto; 
}         
.content-section-grid    
.grid-box
{
      grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 1200px) 
{
.content-section-grid
.grid-box
{      
      width: 85%;
      height: auto; 
}      
.content-section-grid    
.grid-box
{
      grid-template-columns: repeat(5, 1fr);
}
}
@media screen and (min-width: 1440px) 
{      
.content-section-grid
.grid-box
{      
      width: 60%;
      height: auto; 
}     
.content-section-grid        
.grid-box
{
      grid-template-columns: repeat(6, 1fr);
}
}



@media screen and (max-width: 1000px) 
{
.content-section-button
{
	  width: 100%;
	  height: auto;	   
}
.content-section-button
.button-container
{	  
	  width: 100%;
	  height: 20vh;	  	 	  
}
.content-section-button
ul
{	  
	  display: block;	  	  
}
.content-section-button
li
{	      	  
	  width: 120px;
	  height: 60px;	  	  
}
.content-section-button
.button-path
{	  
	  padding: 10px;   	  
	  font-size: 12px;	  
}
.content-section-button
i
{	  	  
      font-size: 12px;  	  
	  padding: 15px 15px;	  
}
}



@media only screen and (max-width: 765px) 
{
.content-section-footer
{                 
      width: 100%;
      height: auto;               
}
.content-section-footer
h4
{                 
      font-size: 15px;        
      padding-top: 20px;
}
.content-section-footer
h5
{           
      font-size: 25px;
      margin-top: 10px;      
}
.content-section-footer      
.grid-container
{      
      width: 90%;
      margin: 0 auto;                  
}
.content-section-footer
.grid-item
{      
      width: 100%;
      height: 100%;                  
}
.content-section-footer
.footer-container
{     
      width: 100%;      
      height: 45vh;            
}
.content-section-footer
.footer-address
{               
      width: 100%;      
}
.content-section-footer
.footer-address
ul
{      
      padding: 5px 5px;
}
.content-section-footer
.footer-address
li
{      
      padding: 5px;
}
.content-section-footer
.footer-address
a
{          
      font-size: 14px;
}
.content-section-footer
.footer-box
{     
      grid-gap: 20px;            
      padding: 0 20px;
}
.content-section-footer
.footer-box
.button-a
{
      font-size: 15px;              
}
.content-section-footer
.footer-box
.button-b
{
      font-size: 15px;      
}
.content-section-footer
.footer-box
.button-c
{
      font-size: 15px;           
}
.content-section-footer
.time-calendar
{      
      bottom: 3%;      
      padding: 0px 20px;
}
}
@media only screen and (min-width: 768px) 
{
.content-section-footer      
.grid-container
{
      display: grid;
      margin: 0 auto;      
      grid-template-columns: repeat(3, 1fr);
}
.content-section-footer
.grid-item
{      
      width: 100%;
      height: 200px;                  }
}
@media only screen and (min-width: 1024px) 
{
.content-section-footer      
.grid-container
{
      display: grid;
      margin: 0 auto;      
      grid-template-columns: repeat(5, 1fr);
}
.content-section-footer
.grid-item
{      
      width: 100%;
      height: 200px;                  
}
}
@media only screen and (min-width: 1440px) 
{
.content-section-footer      
.grid-container
{
      display: grid;
      margin: 0 auto;            
      grid-template-columns: repeat(5, 1fr);
}
}