@font-face {
    font-family: 'Menoe';
    src: url('@fonts/Menoe Grotesque-Regular-Web.eot');
    src: url('@fonts/Menoe Grotesque-Regular-Web.eot?#iefix') format('embedded-opentype'),
         url('@fonts/Menoe Grotesque-Regular-Web.woff') format('woff'),
         url('@fonts/Menoe Grotesque-Regular-Web.woff2') format('woff2'),
         url('@fonts/Menoe Grotesque-Regular-Web.ttf') format('truetype');
    font-weight: normal;
  	font-style: normal;
	}


html {
	font-family: 'Menoe', monospace;
	font-weight: normal;
	font-size: 1.5vw; 
	line-height: 1.5vw;
	color: #000000;
	font-feature-settings: "liga" 1, "kern" 1;
		-webkit-font-feature-settings: "liga" 1, "kern" 1;
  		-moz-font-feature-settings:    "liga" 1, "kern" 1;
  		-ms-font-feature-settings:     "liga" 1, "kern" 1;

		-webkit-font-smoothing: antialiased;
	}

	@media screen and (max-width: 980px) {
			html {
				font-size: 2vw; 
				line-height: 2vw; 
			}
		}
	@media screen and (max-width: 700px) {
		html {
			font-size: 4.5vw;
			line-height: 4.5vw;
		}
	}

body {
	background: #ECECEC;
	margin: 0 0 0 0;
	}

 

 a:link, a:visited {
	color: #0018cc;
	opacity: 1;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	transition: opacity .2s ease-in-out;
	}

a:hover {
	color: #0018cc;
	opacity: .6;
	border-bottom: 1px solid rgba(0, 24, 204, .0);
	}

.grid-content {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 2vw;
	margin-left: 0;
	margin-right: 0;
	padding-left: 3.75vw;
	padding-right: 3.75vw;
	margin: 0 auto;
	}

.bottom-pad {
	padding-bottom: 4.75vw;
	}

	@media screen and (max-width: 700px) {
		.bottom-pad {
			padding-bottom: 8.75vw;
		}
	}

.top-pad {
	padding-top: 4.75vw;
	}

	@media screen and (max-width: 700px) {
		.top-pad {
			padding-top: 8.75vw;
		}
	}

.adress-3col {
	grid-column: span 3;
	}

	@media screen and (max-width: 700px) {
		.adress-3col {
			grid-column: span 12;
		}
	}

.header-logo-top {
	height: 6vw;
	max-height: 80px;
	}

.header-logo-long {
	position: absolute;
	width: 100%;
	overflow: hidden;
	padding-left: 0;
	padding-right: 0;
	z-index: 10;
	}

	@media screen and (max-width: 520px) {
		.header-logo-long {
			margin-top: 9.8vw;
		}
	}


.logo-image {
	position: relative;
	display: block;
	width: 5950px;
	height: 8.2585vw;
	max-height: 140px;
	background-image: url("img/stadia-logo-01.svg");
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: contain;
	animation:scroll 85s linear infinite;
	}

	@media screen and (max-width: 768px) {
		.logo-image {
			height: 12vw;	
		}
	}

	@media screen and (max-width: 520px) {
		.logo-image {
			height: 18vw;	
		}
	}

@keyframes scroll{
	0% {left:0px;}
	100% {left:-5950px;}
	}


#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 100%;
	}

.header-image-container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-column-gap: 2vw;
	margin-left: 0;
	margin-right: 0;
	padding-left: 3.75vw;
	padding-right: 3.75vw;
	position: relative;
	}

	@media screen and (max-width: 700px) {
		.header-image-container {
			padding-left: 0vw;
			padding-right: 0vw;
		}
	}

.header-image-container > div {
	grid-column: 4 / span 6;
	max-width: 520px;
	}

	@media screen and (max-width: 700px) {
		.header-image-container > div {
			grid-column: 1 / span 12;
			max-width: 700px;
		}
	}

.header-image-container .hd-im {
	display: block;
	position: relative;
	z-index: 5;
	}

.header-image-container .hd-im > div {
	height: 100%;
	position: relative;
	}

.header-image-container .hd-im > div {
	background-image: url("img/Tc/001.jpg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-position: center top;
	background-size: 100% auto;
	}

.header-image-container > img {
	max-width: 100%; height: auto;
	position: absolute;
	top: 0; left: 0;
	}

.grid-header-image {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 0;
	margin-left: 0;
	margin-right: 0;
	padding-bottom: 0;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	cursor: ew-resize;
	z-index: 25;
	position: absolute;
	width: 100%; height: 100%;
	}

.h1-arrow {
	grid-column: 4 / span 9;
	margin-bottom: 3.75vw;
	}

.date {
	grid-column: span 3;
	font-size: 3vw;
	line-height: 3vw;
	}

	@media screen and (max-width: 700px) {
		.date {
			grid-column: span 12;
			font-size: 9vw;
			line-height: 9vw;
			}
		}

.name {
	grid-column: span 3;
	font-size: 3vw;
	line-height: 3vw;
	}

	@media screen and (max-width: 700px) {
		.name {
			grid-column: span 12;
			font-size: 9vw;
			line-height: 9vw;
		}
	}

.adress {
	font-size: 1.5vw; 
	line-height: 1.5vw;
	}

	@media screen and (max-width: 700px) {
		.adress {
			font-size: 6vw;
			line-height: 6vw;
		}
	}

.preface {
	grid-column: span 12;
	font-size: 6vw;
	line-height: 6vw;
	/*margin-top: 3.875vw;*/
	}

	@media screen and (max-width: 700px) {
		.preface {
			font-size: 9vw;
			line-height: 9vw;
		}
	}

.gallery-col2 {
	grid-column: span 2;
	align-self: end;
	}

	@media screen and (max-width: 700px) {
		.gallery {
			grid-column: 6 / span 7;
		}
	}

.gallery-col3 {
	grid-column: span 3;
		align-self: end;
	}

.gallery-col4 {
	grid-column: span 4;
}

.img-size {
    max-width: 100%; height: auto;
    display: block;
    }

.gallery-txt {
	grid-column: 4 / span 3;
	}


.project {
	position: relative;	
	grid-column: span 7;
	padding-bottom: 3.875vw;
	}

	@media screen and (max-width: 700px) {
		.project {
			grid-column: span 12;
			padding-bottom: 6.875vw;
		}
	}

.project-title {
	font-size: 3vw;
	line-height: 3vw;
		}

	@media screen and (max-width: 700px) {
		.project-title {
			font-size: 9vw;
			line-height: 9vw;
		}
	}

.project-img {
	width: 30vw;
	max-width: 380px;
	height: auto;
	z-index: -10;
	position: absolute;
	display: block;
	opacity: .0;
	transition: opacity .2s ease-in-out;
	top: -2vw;
	left: 47.3vw;
	}

	@media screen and (max-width: 700px) {
		.project-img {
			left: 24vw;
			width: 62vw;
		}
	}

.project-title:hover +.project-img {
    	opacity: 1;
	}

	@media screen and (max-width: 700px) {
		.project-title:hover +.project-img {
    		display: hidden;
		}
	}



.project-img > img {
	object-fit: contain;
	width: 100%;
	}

.names-first {
	grid-column: 4 / span 3;
	}

	@media screen and (max-width: 700px) {
		.names-first {
			grid-column: 1 / span 12;
		}
	}

.names {
	grid-column: span 3;
	}

	@media screen and (max-width: 700px) {
		.names {
			grid-column: span 12;
		}
	}

.bottom-color {
	background-color: #0018CC;
	color: #FFF;
	padding-top: 3.75vw;
	padding-bottom: 3.75vw;
	}

	@media screen and (max-width: 700px) {
		.bottom-color {
			padding-top: 8.75vw;
			padding-bottom: 8.75vw;
		}
	}


.smi-link a {
	color: #fff;
	opacity: 1;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, .8);
	transition: opacity .2s ease-in-out;
	}

.smi-link a:hover {
	opacity: .6;
	}

		

.smi-link {
	grid-column: span 3;
	}

	@media screen and (max-width: 700px) {
		.smi-link {
			grid-column: span 12;
			padding-bottom: 3.75vw;
		}
	}

.read-more-button {
	grid-column: 10 / span 3;
	}

	@media screen and (max-width: 700px) {
	.read-more-button {
			grid-column: 1 / span 12;
		}
	}

.right-button {
	position: absolute;
}

.right-arrow {
	text-align: right;
	}

.a-logo {
	grid-column: 6 / span 2;
	padding: 12vw 0 24vw 0;
	position: relative;
	display: block;
	}

	@media screen and (max-width: 700px) {
			.a-logo {
				grid-column: 3 / span 8;
				padding: 12vw 0 80vw 0;
			}
	}

.a-logo-round {
	position: absolute;
	display: block;
	}

.a-logo-round > img {
	object-fit: contain;
	width: 100%;
	}

.a-logo-a {
	position:absolute;
	display: block;
	}

.a-logo-a > img {
	object-fit: contain;
	width: 100%;
	}
	

#loading {
		-webkit-animation: rotation 10s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(360deg);
		}
	}

.footer {
	grid-column: span 6;
	}

	@media screen and (max-width: 700px) {
		.footer {
			grid-column: span 12;
		}
	}