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

		#header {
			background-image: url("images/header_svg_wide.svg"), url("images/header_1680.webp");
            padding: 1em 0 0em 0;
        }
		
		 #header:before {
			margin-top:4px!important;
		}
	
		#logo { 
			width:291px;           
			height:320px;
			top:-5px;
		}
		
		#nav {
				padding-right:2em;
		}
		
		#header:before {
				margin-top:0px;
		}
		#header h1 {
			font-size: 2.25em;
		}

		#header p {
			font-size: 1.25em;
			line-height: 1.65em;
		}
		
		#header.major {
				margin-bottom: 2em;
				padding: 1em 0;
				
		}
		
		#footer{
                height:310px;
		}

		#footer_background{
                height:250px;
        }
		
		#footer_background:before{
				height:65%
		 }
		
		#footer_background_horizontal_line_top, #footer_background_horizontal_line_bottom{  /* double horizontal line in the footer */
			width:24em;
	}
		
		#footer_background_padding{ /* lower vertical line in the footer  */
				height:38%;
}
      .footer_white_stripe{
			width:30px;	
		}
       
}

/* Normal */

@media screen and (max-width: 1280px) {
		
		#header {
			background-image: url("images/header_svg_wide.svg"), url("images/header_1280.webp");
			padding: 1em 0 0em 0;
			}
				
		#logo { 
			background-position:bottom center;
			background-repeat: no-repeat;
			background-size:contain;
			position: relative;
			display: inline-block;
			height:300px;
			width:283px;
			top:0px;
			left:0px;
		}
		
			
			/* center the menu */
	
		#menu_padding_element{
				display:none;
		}
		
		#nav, #nav ul {
				padding-right:0em;
		}
	
		
		#header:before, #line_connector { /*remove horizontaland vertical  line connecting menu and city */
				display:none;
    	}
		
		#menu_container {  /* center the menu  on narrow screens */
				display: flex;
				justify-content:center;
				padding-right:0em;
				margin-left:0;
			 }
		#button_line {
			display:none;
		}

	#header:before {
					height: calc(100% - 25px);
				}

				#header:after {
					height: 0px;
				}
	
		header.major {
				padding: 1em 0;
			}

				header.major p {
					font-size: 1.15em;
				}
	
		#wrapper > * > .inner {
/* 				padding: 0 1.25em; */
			}
			  .tiles.grid_container {
				column-gap: 35px;
				row-gap: 35px;
		}

		#footer{
                height:240px;
		}
		#footer_background{
                height:200px;
		}	
		#footer_background:before{
				height:60%
		 }
        
       .footer_white_stripe{
			width:25px;	
		}
 
	.tiles.grid_container {
		row-gap:20px;
		column-gap:20px;
	}
	#footer_background_padding{ /* lower vertical line in the footer  */
				height:36%;
	}	
}

@media screen and (max-width:1000px) {
	#header {
	background-image: url("images/header_svg_1280.svg"), url("images/header_1280.webp");
	}
	
            .container {
				width: 95%;
			}

			.container.medium, #horizontal_footer_line{
					width: 80%;
				}
				
            .footer_column_middle{
                 width:100%;
				  margin:0;
            }
            
            .footer_column_left,  .footer_column_right,.footer_white_stripe  {
                display:none;
            }
          
			
			#footer_background_horizontal_line_top, #footer_background_horizontal_line_bottom{  /* double horizontal line in the footer */
			width:20em;
	}
		span.info { /*text */
				font-size:16px;
		}
}
/* IMAGES BOX (services and about) TO COLUMN. Projects grid switch to 2 column */


	@media screen and (max-width: 760px) {
		
		#header {
			background-image: url("images/header_svg_760.svg"), url("images/header_760.webp");
		}
			
		#logo { 				
				width:218px;
				height:240px;
				top:10px;
			}		
		
			
			header.major {
				margin-bottom: 1em;
				padding-left: 0em;
				padding-right: 0em;
			}

				header.major br {
					display: none;
				}

			footer.major {
				margin-top: 1.5em;
				margin-bottom: 1.5em;
				
			}
				footer.major br {
					display: none;
				}
				
			 #wrapper > * > .inner {
				padding: 0 2.5em;
            }
			
			#main {
				padding: 1em 0 0em 0;
			}
             #main::before{
				height:3%; /* adjust length of the main vertical line running along */
			}
           span { /*text */
				line-height: 125%;
			}
	
	
	    #about_box_container :nth-child(1) {order:1;}
		#about_box_container :nth-child(2) {order:2;}
		#about_box_container :nth-child(3) {order:3;} /* break line */
		#about_box_container :nth-child(4) {order:5;}
		#about_box_container :nth-child(5) {order: 4;}
		#about_box_container :nth-child(6) {order:6;} /* break line */
		#about_box_container :nth-child(7) {order: 7;}
		#about_box_container :nth-child(8) {order:8;}
		

		#service_box_container :nth-child(1) {order:2;}
		#service_box_container :nth-child(2) {order:1;}
		#service_box_container :nth-child(3) {order:3;} /* break line */
		#service_box_container :nth-child(4) {order:4;}
		#service_box_container :nth-child(5) {order: 5;}
		#service_box_container :nth-child(6) {order:6;} /* break line */
		#service_box_container :nth-child(7) {order: 8;}
		#service_box_container :nth-child(8) {order:7;}
		#service_box_container :nth-child(9) {order:9;} /* break line */
		#service_box_container :nth-child(10) {order:10;}
		#service_box_container :nth-child(11) {order:11;}
		
		#about_box_container{
				width:80% !important;
				flex-direction:column;
		}
		
		#service_box_container{
				width:80% !important;
				flex-direction:column;
		}
		
	
		
		.about_image{
			width:100% !important;
		}
		
		.box_text{ /* text container for alignment */
				padding: 20px !important;
				width:100% !important;    
				line-height: 150%;
				
		}
			
		#footer{
                height:240px;
		}
		#footer_background{
                height:200px;
        }
     
	
	
		.tiles.grid_container { /* switch to 2 columns of images*/
			display: grid;
			grid-template-columns: 0.50fr 0.50fr;
			column-gap: 20px;
			row-gap: 20px;
			align-items: center;
			justify-content: center;
		}
		.flex_container_wide {
			display: none !important; /* hide the header for images */
		}

		h1.projects {
					letter-spacing:1px;
			}
		h1 {
					letter-spacing:2px;
			}
	}


/* Mobile (Portrait) */

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

		#main {
				padding-left: 0em;
				padding-right: 0em;
			}
				#wrapper > * > .inner {
				padding: 0 1.25em;
			}
		#footer.major {
				padding-left: 1em;
				padding-right: 1em;
				margin-bottom:1.5em;
				margin-top:1.5em;
			}
		
		.footer_column_left,  .footer_column_right{ /*footer one middle column only */
                display:none;
	   }
	  
		.footer_column_middle{
                width:100%;
        }
		
		#menu_container:before {
			margin-top:40px;
		}
		
		#nav ul {
		width:450px;
		}
		
		.container.medium, #horizontal_footer_line{ /* we are text box size */
				width: 90%;
		}
		
		h1, h1.projects, h3,h4{
					font-size:22px;
			}
}

/* Mobile (Vertical) */

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

		
		#logo { 
				width:227px;
				height:250px; /*572 */
				top:15px;
			}
		
		
		#header {
			padding-left: 2em;
			padding-right: 2em;
		}
		
		.container.medium,#horizontal_footer_line{ /* we are text box size */
				width: 98%;
		}
		
		#we_are_text{
			letter-spacing:1px;
		}
	
		#nav ul li{
			min-width:90px!important;
		}
	
		#nav ul li a{
				font-size:18px;
				 line-height: normal;
		}
		#phone_icon{
			width:30px;
			height:30px;
/* 			display:none; */
	}
	.box_text{ /* text container for alignment */
        width:50%;    
        line-height: 120%;
        padding: 0px 10px 0px 10px;  
		}
		
	#footer_background_horizontal_line_top, #footer_background_horizontal_line_bottom{  /* double horizontal line in the footer */
			width:12em;
	}
}
	@media screen and (max-width: 450px) {
		
		#nav ul {
		width:400px!important;
	}
		#nav ul li a{
				font-size:17px;
		}
	
			h1.projects{
					font-size:20px;
					letter-spacing:0px;
			}
		.button_line {
			width:5px;
/* 			display:none; */
		}
		
		#wrapper  {
		width: 100%;
		}
		   #main.projects:before{
				height:1%; /* adjust length of the main vertical line running along */
			}
		.tiles.grid_container { /* switch to 1 columns of images*/
			display: grid;
			grid-template-columns: 75%;
			row-gap: 30px;
			align-items: center;
			justify-content: center;
		}
}

@media screen and (max-width: 400px) {
	
	#phone_icon{
				display:none;
		}
	
	#nav ul {
		width:350px!important;
	}
	
	#nav ul li{
			min-width:80px!important;
		}
	#nav ul li a{
				font-size:15px;
		}
		h2{
					font-size:24px;
					letter-spacing:0px;
			}
			
		h1, h1.projects,h4{
					font-size:19px;
					letter-spacing:0px;
			}
}