/* css file for thefacadeorganisation.com 2025 iframe version */

body {
	position: relative;
	min-height: 100vh;
	margin: 0;
	padding-bottom: 120px;
	color: black;
	font-family: montserrat, sans-serif;
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1.8em;
	}
	
b {
	font-weight: 500;
	}
	
strong {
	font-weight: 600;	
	}
	
h1,h2,h3,h4,h5,h6 {
	font-weight: 600;
	padding-top: 72px;
	padding-left: 42px;
	}
	
.title {
	background-color: white; 
	color: black; 
	margin-top: -20px; 
	margin-bottom: -12px;
	}
	
ul {
	font-size: 100%;
	}
	
#mask { 
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 100%; 
	min-height: 100%; 
	background-color: 
	black; opacity: 0.6; 
	visibility: hidden; 
	z-index: 901; 
	}
#overlay {	
	position:absolute; 
	top: 50%; 
	left: 50%; 
	width: 640px; 
	margin-left: -320px; 
	height: 360px; 
	margin-top: -200px; 
	background-color: white; 
	border: 2px solid #222222; 
	border-radius: 30px; 
	visibility: hidden; 
	z-index: 902; 
	}
#overContainer {  
	margin: 30px; 
	text-align: justify; 
	font-size: 1.0em; 
	}
		
.navbar {
	padding-left: 50px;
	}
	
#social {
	position:absolute;
	right: 55px;
	top: 8px;
	//color: #9b4b36;
	color: white;
	font-size: 250%;
	}

.cta {
	position: absolute;
	left: 50%;
	margin-left: -140px;
	width: 280px;
	top: 50%;
	margin-top: -56px;
	height: 102px;
	background-color: #111122;
	text-align: center;
	z-index: 900;
	border: 1px solid white;
	}
	
.cta a {
	font-size: 2em;
	line-height: 2.4em;
	}
	
.cta a:link {
	color: #e91b1b !important; 
	}
.cta a:visited { 
	color: #e91b1b !important; 
	}
.cta a:hover { 
	color: #e91b1b !important; 
	font-weight: 600;
	text-decoration: none;
	}
.cta a:active { 
	color: #e91b1b !important; 
	}
	
.tfo-header {
	background-color: white;
	}
	
.tfo-header-image {
	width: 50%;
	}	


@media (max-width: 767.98px) { 

	h1,h2,h3,h4,h5,h6 {
		font-size: 120%;
		}
		
	p {
		margin-top: 10px;
		font-size: 0.8em;
		line-height: 1.5em;
		}
	
		
	#social {
		font-size: 175%; 
		} 
	
	.cta {
		margin-left: -100px;
		width: 200px;
		top: 50%;
		margin-top: -40px;
		height: 82px;
		}
	.cta a {
		font-size: 1em;
		font-weight: normal;
		line-height: 3em;
		}
	.cta a:hover {  
		font-size: 1.2em;
		font-weight: bold;
		line-height: 3em;
		}
	.tfo-title {
	 	width: 67%;
	    }
	.tfo-caption {
		font-size: 80%;
		}
	.tfo-header-image {
		width: 80% !important;
		}
	}
					
.tfo-framed {
	margin: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 40px;
	border: 1px solid white;
	text-align: justify;
	}
	
.tfo-header-image {
	width: 50%;
	}
	
.tfo-footer {
	position: absolute;
	bottom: 0;
	height: 120px;
	padding: 20px;
	background-color: #111122;
	margin: 0;
	}
	
.tfo-footer-text {
	//line-height: 80px;
	color: white;
	font-size: 80%;
	}
	
.tfo-whitebox {
	background-color: white;
	}
	
.navbar-dark {
	//border-top: 2px solid #000000;
	//border-bottom: 2px solid #000000;
	background-color: #111122 !important;
	}
	
a:link { 
	color: #999999 !important 
	}
a:visited { 
	color: #999999 !important 
	}
a:hover { 
	color: gray !important 
	}
a:active { 
	color: white !important 
	}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    color: #fff !important;
	}

.nav-item {
	font-size: 1.8em;
	font-family: Montserrat, sans-serif;
	margin-right: 30px;
	}
	
.dropdown-menu {
	margin-top: 7px;
	background-color: #111122;
	}
	
.dropdown-item {
	font-size: 1.8em;
	font-family: Montserrat, sans-serif;
	background-color: #111122 !important;
	}
	
.dropdown-item.active {
	color: black !important;
	background-color: #ffffff !important;
	}
	
.hovereffect {
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	position:relative;
	text-align:center;
	cursor:default;
	}

.hovereffect .overlay {
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:100%;
	margin-top: -40px;
	left:0;
	opacity:0;
	background-color:rgba(0,0,0,0.5);
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out
	}

.hovereffect img {
	display:block;
	position:relative;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
	}

.hovereffect h2 {
	text-transform:uppercase;
	color:#fff;
	text-align:center;
	position:relative;
	font-size:17px;
	background:rgba(0,0,0,0.6);
	-webkit-transform:translatey(-100px);
	-ms-transform:translatey(-100px);
	transform:translatey(-100px);
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	padding:10px;
	}

.hovereffect:hover img {
	-ms-transform:scale(1.2);
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
	}

.hovereffect:hover .overlay {
	opacity:0.75;
	filter:alpha(opacity=75);
	}

.hovereffect:hover h2 {
	opacity:1;
	filter:alpha(opacity=100);
	-ms-transform:translatey(0);
	-webkit-transform:translatey(0);
	transform:translatey(0);
	}