@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic");
@import url("https://fonts.googleapis.com/css?family=Permanent+Marker");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
@import url("https://fonts.googleapis.com/css?family=Rowdies");
@import url("https://fonts.googleapis.com/css?family=Anton");



html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}

		article, aside, details, figcaption, figure,
		footer, header, hgroup, menu, nav, section {
		display: block;
			}

		html { /*Include padding and border in the element's total width and height. Important */
		box-sizing: border-box;
	}

	*, *:before, *:after { 
		box-sizing: inherit;
	}
	
	ul {
		list-style-type: none;
	}

	/*	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-webkit-backface-visibility: hidden !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}*/

	/* ************************************  FONTS TYPE AND SIZE */
	body, input, select, textarea {
/* 		color: #6e6e6e; */
		color: #5b5b5b;
		font-family:'Noto Sans', 'Roboto Condensed', 'Saira Condensed', 'Anton',  'Source Sans Pro', sans-serif;
		font-size: 16pt;
		font-weight: 400;
		line-height: 1.75em;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
		text-decoration: none;
	}

	h1, h1.project, h2, h3, h4, h5, h6 {
		font-family: 'Anton';
		font-size:26px;
		font-weight: 500;
		text-transform:uppercase;
		letter-spacing: 0.125em;
		line-height: 1.5em;	
		text-align: center;
	}

	h1 {
		letter-spacing: 4px;
	}
	
	h2 { /* We build to last */
		font-size:34px;
		font-weight: 700;
		letter-spacing:2px;
	}
	
	h3 {
		letter-spacing: 2px;
	}
	
	h1.projects  {
		letter-spacing:4px;
	}
	
/* Container of --below you will find some of our projects --*/

	.container { /*default */
		margin: 0 auto;
		max-width: 100%;
		width: 91em; /* box width */
	}

		.container.medium {
			width: 34em;
		}

		header.major {  /* we are rough text box outside lines */
			border-bottom-width: 1px;
			border-color: rgba(0, 0, 0, 0.35);
			border-style: solid;
			border-top-width: 1px;
			margin-bottom: 2em; /* lenth of line between below and first image - old is 6 */
			padding: 1em 0em; /* height of space abpve and below of  --below are some ofthe projects--- */
			position: relative;
		}

			header.major:before, header.major:after {
				background: rgba(0, 0, 0, 0.07);
				content: '';
				display: block;
				height: 2px; /* with of the lines above and beolw of --some of the projects we did -- */
				left: 0;
				position: absolute;
				width: 100%;
			}

			header.major:before {
				top: 10px;
			}

			header.major:after {
				bottom: 10px;
			}

			header.major h2 {
				margin: 0;
			}


			header.major.last {
				border-bottom: 0;
				margin-bottom: 0;
				padding-bottom: 0;
			}

				header.major.last:after {
					display: none;
				}

				header.major.last h2 {
					margin-bottom: 1em;

				}

	footer {
		text-align: center;
	}

		footer.major {
			border-top-width: 1px;
			border-bottom-width: 2px; /* width of the double footer horizontal line */
			border-top-color: rgba(0, 0, 0, 0.35);
			border-bottom-color: rgba(0, 0, 0, 0.07);
			border-style: solid;
			width:20%;
			margin-top: 3em;
			margin-bottom: 0em;
			padding: 5px 0; /* space bwetween double lines */
			position: relative;
		}

h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
		}

/* Wrapper */

	#wrapper > * > .inner {
		width: 100%;
		max-width: 50em; /* frame size */
		margin: 0 auto;
		padding: 0 2.5em;
	}
	
/* Main */

#main.projects::before {  /* vertical line in the middle along the whole page */ 
			background: rgba(0, 0, 0, 0.25);
			content: '';
			height: 100%; /* end at the footer */
			left: 50%;
			position: absolute;
			top: 0;
			width: 1px;
		}
	
#main::before {  /* vertical line in the middle along the whole page */ 
			background: rgba(0, 0, 0, 0.25);
			content: '';
			height: 100%; /* end at the footer */
			left: 50%;
			position: absolute;
			top: 0;
			width: 1px;
		}
		
	#main {
		padding: 3em 0 0em 0;
		position: relative;
	}

 		#main header.major, /* color of the "we are small" */
		#main footer.major {
			background: #ffffff;
		}

		header.major {
				margin-bottom: 3em;
				padding: 1em 0;
		}

		#main_bottom_padding{
		height:70px;
/* 			width:100%; */
		}
		
/* super wide screen. Starts by default and scales down */
			
	#header {
			background-attachment: local, local;
			background-image: url("images/header_svg_wide.svg"), url("images/header_wide.webp");
			background-position: bottom left, top center;
			background-repeat: no-repeat, no-repeat;
			background-size: 100%, auto; 
			position: relative;
			text-align: center;
        }
			
	#logo { 
			background-image: url("images/logo_wide.webp");
			background-position:bottom center;
			background-repeat: no-repeat;
			background-size:contain;
			position: relative;
			display: inline-block;
			 border: 0 none;
			width:354px;           
			height:390px;
			top:-15px;
		} 
		
	  .header_column_left{
			height:600px;
			width:27.5%;
			background-color:rgb(50,50,50,0.0);

		
}
     .header_column_middle{
			width:45%;
			background-color:rgb(0,0,0,0);
		
}
.header_column_right{
			width:27.5%;
			background-color:rgb(0,0,0,0);
} 

.header_white_column {
			width:50px;
			height: 450px;
/* 			background-color:white; */
			margin-top:-30px;
			z-index:-6;
}

	.tiles.grid_container {
		display: grid;
		grid-template-columns: 0.25fr 0.25fr 0.25fr 0.25fr;
		row-gap:30px;
		column-gap:30px;
		
	}
	
	#footer {
	     display: flex;	
		 justify-content:left;
	  	 background-attachment: scroll;
		 height:460px;
		text-align: center;
    }
  
  #footer_background{
	    display: block;
		margin: 0 auto;
		flex-direction: row;
		align-items: start;
		justify-content: center;
		flex-wrap: wrap;
		position: absolute;
		height:400px;
		width:100%;
		
		background-image: url("images/svg_footer.svg");
		background-size:cover;
		background-position:top center;
		background-repeat:no-repeat;
		z-index:10;
  }  
 
  .footer_column_left{
		width:25%;
		background-color:var(--footer_color);
	}
	
	.footer_column_middle{
		width:50%;
		background-color:var(--footer_color);
	}

	.footer_column_right{
		width:25%;
		background-color:var(--footer_color);
} 
  
.footer_white_stripe{
		height:100%;
		width:40px;
		background-color:#f8f8f8;
	}

#footer_background_horizontal_line_top{
		margin: 0 auto;
		width:34em;
        height: 12px;
		border-bottom: 2px solid rgba(0,0,0,0.07);
		border-top: 1px solid rgba(0,0,0,0.35); 
}

#footer_background_horizontal_line_bottom{
		margin: 0 auto;
		width:34em;
        height: 12px;
		border-top: 2px solid rgba(0,0,0,0.07);
		border-bottom: 1px solid rgba(0,0,0,0.35); 
}

#footer_background_middle_image{
	width:100px;
	height:100px;
	
}
#footer_background_logo{
		background-image: url("images/footer_logo.webp");
		background-size:contain;
		background-position:top center;
		background-repeat:no-repeat;
		height:30%;
}

#footer_background_padding{ /* 1px wide vertical line in the footer */
		margin: 0 auto;
		width:1px;
		height:42%;
		border: 1px solid rgba(0,0,0,0.25);
}

 :root {
  --footer_color:#515151; /*grey */
}