/*!
 * Start Bootstrap - The Big Picture (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

@import url('https://fonts.googleapis.com/css?family=Raleway:800');
@import url("https://use.typekit.net/gav3zyl.css");

body {
	margin-top: 0;
	margin-bottom: 0;
	background: #fff;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	font-weight: 400;
	font-size: 14px;
}

body.hidden {
	overflow: hidden;
}


html, body {
	height:100%; margin:0;padding:0
}

.container-fluid{
	height:100%;
	display:table;
	width: 100%;
	padding: 0;
  }
  
  .row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
  
  .centering {
	float:none;
	margin:0 auto;
  }

a, a:hover, a:visited, a:active, a:link, a:focus {color:#111; text-decoration: none;}
.nav-link:active, .nav-link:focus {text-decoration: underline;color:#111;}
a.light, a.light:hover, a.light:visited, a.light:active, a.light:link {color:#fff !important; text-decoration: none !important;}


.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}


h1 {
  font-weight: 200;
  font-size: 3.5em;
  margin: 0.4em 0;
}


#rotate {	
	font-family: alfarn-2, sans-serif;
	font-size: 8em;
	font-weight: bold;
	color:#fff;
	text-transform: uppercase;
	/*mix-blend-mode:hard-light*/
}

/* Menu */

#menu a, #menu a:hover, #menu a:visited, #menu a:active, #menu a:link {color:#111; text-decoration: none; font-size:1.3em; padding:5px 15px;} 
#menu-light a, #menu-light a:hover, #menu-light a:visited, #menu-light a:active, #menu-light a:link {color:#fff !important; text-decoration: none; font-size:1.3em; padding:5px 15px;} 
#menu-dark a, #menu-dark a:hover, #menu-dark a:visited, #menu-dark a:active, #menu-dark a:link {color:#fff; background-color:#111; text-decoration: none; font-size:1.3em; padding:5px 15px;} 

#upper_left {
	position: fixed;
	top: 0;
	left: 0;
	padding:20px;
	z-index:500;
}
#upper_right {
	position: fixed;
	top: 0;
	right: 0%;
	padding:20px;
	z-index:500;
}
#lower_left {
	position: fixed;
	bottom: 0%;
	left: 0;
	padding:20px;
	z-index:500;
}
#lower_right {
	position: fixed;
	bottom: 0%;
	right: 0%;
	padding:20px;
	z-index:500;
}

/* Submenu Projects */

.offcanvas {
	background-color:#fff0;
}

.offcanvas-start {
	border-right:none;
	width:300px;
}

.list-group {
	border-radius: 0;
}

.list-group-item {
	background-color:#fff0;
	border:none;
	color:#fff !important;
	padding:0 15px;
}


/* Projects */

.bg-project {
	background-image: url(../img/mmbt-bg-grey.jpg);
	background-size: contain;
	filter: contrast(1.5);
	aspect-ratio: 1;
  }

.container-projects {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-gap: 0;
  }

  .container-projects div {
	background-image: url(../img/mmbt-bg-grey.jpg);
	background-size: contain;
	/*filter: contrast(1.5);*/
	aspect-ratio: 1;
	opacity: .95;
  }


  .container-projects a.room-i .text-flicker {
	background-image: url(../img/mmbt-bg-grey-i.jpg);
	background-size: contain;
  }

  .container-projects a.room-i:hover .text-flicker{
		background-image: url(../img/mmbt-bg-pink.gif);
		background-size: contain;
  }

  .container-projects a.room-ii .text-flicker {
	background-image: url(../img/mmbt-bg-grey-ii.jpg);
	background-size: contain;
  }

  a.room-ii:hover .text-flicker {
	background-image: url(../img/mmbt-bg-green.gif);
	background-size: contain;
}

.container-projects a.room-iii .text-flicker {
	background-image: url(../img/mmbt-bg-grey-iii.jpg);
	background-size: contain;
  }

a.room-iii:hover .text-flicker {
	background-image: url(../img/mmbt-bg-cyan.gif);
	background-size: contain;
}



/* Typewriter */

.container-typewriter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#typewriter {
	color:#333;
	margin: auto !important;
    /*width: 720px;
    height: 300px;*/
	font-size:2.5em;
	align-content:center;
}

#typewriter strong {
	font-weight: bold;
}

@media screen and (max-width: 450px) {
	body.hidden {
		overflow: visible;
	}
	#typewriter {
		margin: auto !important;
		/*width: 320px;
		height: 200px;*/
		font-size:.7em;
		align-content:center;
	}
	#rotate {	
		font-size: 2em;
		font-weight: bold;
	}
	.fullscreen-bg__video {
		min-height:100% !important;
		width:auto;
	}
	/*
	.container-projects {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		grid-gap: 0;
	  }
	
	  .container-projects div {
		background-image: url(../img/mmbt-bg-grey.jpg);
		background-size: contain;
		filter: contrast(1.5);
		aspect-ratio: 1;
	  }*/
}