/**
*
*** Idea Factory ***
*
*
*
*/


/* Potentional IDEA overlay effects  */

/* the IDEA factory CSS */



div.ideaFactory-FadeInFont p a.no-effect, div.ideaFactory-FadeInFont h3 a.no-effect {
	color: #FFF;
	text-decoration: none;
}

div.ideaFactory-FadeInFont p a.no-effect:hover, div.ideaFactory-FadeInFont h3 a.no-effect:hover {
	color: #FFF;
	text-decoration: underline;
}


.ideaFactory-logo-position {
	position: absolute;
	left:0; 
	bottom:0; 

}
.ideaFactory-logo {
	width: 700px;
	height: auto;
}

/* START point */
.ideaFactory-FadeIn {
	position: relative;
	width: 100%;
}

.ideaFactory-FadeInPic {
	display: block;
	width: 100%;
	height: auto;
	-webkit-filter: brightness(75%);  /* Safari 6.0 - 9.0 */
	filter: brightness(75%);

}

.ideaFactory-FadeInPicHover {
	display: block;
	width: 100%;
	height: auto;
	background-color: #0f2439;
	opacity: 0.75;
}

.ideaFactory-FadeInHover {
	color: #FFF;
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: 100%; 
	opacity: 0.75;
	background-color: #0f2439;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	font-size: 1em;
	text-align: center;
	padding-top: 15%;
}




.ideaFactory-FadeInFont {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: 100%; 
	color: #FFF;
	font-size: 1.5em;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
	padding-top: 15%;

}



.ideaFactory-FadeInFont h3 {
	color: #FFF;
	font-size: 110%;
}

.ideaFactory-FadeInFont p {
	color: #FFF;
	font-size: 75%;
}

.ideaFactory-FadeInFont a {
	color: #FFF;
	font-size: 1em;
}


/* right to left pull effect  */
.rightLeftWrap {
	position: relative;
	width: 100%;

}

.rightLeftPic {
	display: block;
	width: 100%;
	height: auto;

}

.rightLeftHover {
	position: absolute;
	bottom: 0;
	left: 100%;
	right: 0;
	background-color: rgba(15, 36, 57,1);
	overflow: hidden;
	width: 0;
	height: 100%;
	transition: 0.3s ease;

}

.rightLeftWrap:hover .rightLeftHover {
	width: 100%;
	left: 0;
}

.rightLeftFont {
	color: #FFF;
	font-size: 1em;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;

}

.rightLeftFont h3 {
	color: #FFF;
	font-size: 1.2em;

}

.rightLeftFont a {
	color: #FFF;
	font-size: 1em;
}

/* Left to right push effect */
.leftRightWrap {
	position: relative;
	width: 100%;
}

.leftRightPic {
	display: block;
	width: 100%;
	height: auto;
}

.leftRightHover {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(15, 36, 57,1);
	overflow: hidden;
	width: 0;
	height: 100%;
	transition: 0.3s ease;

}

.leftRightWrap:hover .leftRightHover {
	width: 100%;

}

.leftRightFont {
	color: #FFF;
	font-size: 1em;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;

}

.leftRightFont h3 {
	color: #FFF;
	font-size: 1.2em;
}

.leftRightFont a {
	color: #FFF;
	font-size: 1em;
}


/* raising effect  */
.raisingContainer {
	position: relative;
	width: 100%;
}

.raisingPic {
	display: block;
	width: 100%;
	height: auto;
}

.raisingHover {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 100%;
	background-color: rgba(15, 36, 57,1);
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: 0.3s ease;

}
.raisingContainer:hover .raisingHover {
	top: 0;
	height: 100%;
}

.raisingFont {
	color: #FFF;
	font-size: 1em;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%,-50%);
	text-align: center;

}

.raisingFont h3 {
	color: #FFF;
	font-size: 1.2em;

}

.raisingFont a {
	color: #FFF;
	font-size: 1em;
}

/* Downward drop container effect  */
.downDropContainer {
	position: relative;
	width: 100%;

}

.downDropPic {
	display: block;
	width: 100%;
	height: auto;

}

.downDropHover {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: rgba(15, 36, 57,1);
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: 0.3s ease;
}

.downDropContainer:hover .downDropHover {
	bottom: 0;
	height: 100%;

}

.downDropFont {
	color: #FFF;
	font-size: 1em;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}

.downDropFont h3 {
	color: #FFF;
	font-size: 1.2em;
}

.downDropFont a {
	color: #FFF;
	font-size: 1em;
}

/* Phase in container effect edition  */
.phaseInWrap {
	position: relative;
	width: 100%

}

.phaseInPic {
	opacity: 1;
	display: block;
	width: 100%;
	height: auto;
	transition: .3s ease;
	backface-visibility: hidden;

}

.phaseIn {
	transition: .3s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.phaseInWrap:hover .phaseInPic {
	opacity: 0.3;
}
.phaseInWrap:hover .phaseIn {
	opacity: 1;
}

.phaseInFont {
	background-color: rgba(15, 36, 57,1);
	color: #FFF;
	font-size: 1em;
	padding: 15px 30px;
	text-align: center;
}

.phaseInFont h3 {
	color: #FFF;
	font-size: 1.2em;
}

.phaseInFont a {
	color: #FFF;
	font-size: 1em;

}


/* CSS for fade in effect */
.fadeInBox {
	position: relative;
	width: 100%;
}

.fadeInPic {
	display: block;
	width: 100%;
	height: auto;
}

.fadeInHover {
	position: absolute;
	top: 0;
	bottom: 0; 
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .3s ease;
	background-color: rgba(15, 36, 57,1);
}

.fadeInBox:hover .fadeInHover {
	opacity: 0.75;

}

.fadeInFont {
	color: #FFF;
	font-size: 1em;
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%); /*firefox */
	text-align: center;
}

.fadeInFont h3 {
	color: #ffffff;
	font-size: 1.2em;
}

.fadeInFont a {
	color: #ffffff;
	font-size: 1em;
}


.container-4x3 {
	margin: 0 !important;
	width: 100%;
	padding-top: 75%; /* 4:3 Aspect Ratio */
	position: relative;
}

.container-4x3-text {
	width: 100%;
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	font-size: 100%;
	/* 	font-size: 1vw; */
}



.container-4x3 > .container-4x3-text > .carousel-row, .container-4x3 > .carousel-row {
	margin: 0;
}


@media only screen and (max-width: 1300px) {
	.ideaFactory-mainPhoto .ideaFactory-picText {
		font-size: 400%;

	}

	.ideaFactory-mainPhoto .ideaFactory-picText .ideaFactory-smText {
		font-size: 50%;
	}



}

@media only screen and (max-width: 1000px) {
	.ideaFactory-mainPhoto .ideaFactory-picText {
		font-size: 300%;

	}

	.ideaFactory-mainPhoto .ideaFactory-picText .ideaFactory-smText {
		font-size: 50%;
	}


}

@media only screen and (max-width: 1200px) {
	.container-4x3 > .container-4x3-text > .carousel-row, .container-4x3 > .carousel-row {
		margin-right: -15px;
	}
/* 	sm devices in Bootstrap 3.3 */
	
}

@media only screen and (max-width: 768px) {
	.container-4x3-text{
		font-size: 75%;
	}
	
/* 	xs devices in Bootstrap 3.3 */
	
}


@media only screen and (max-width: 550px) {
	.ideaFactory-mainPhoto .ideaFactory-picText {
		font-size: 200%;
		
	}

	.ideaFactory-mainPhoto .ideaFactory-picText .ideaFactory-smText {
		
		font-size: 50%;
	}

	.ideaFactory-logo {
		width: 100%;
		height: auto;
	}

	.ideaFactory-logo-position {
		position: absolute;
		left: 50%; 
		top: 75%;
		bottom: auto;
		right: auto;
		width: 100%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);

	}

	.container-4x3-text{
		/* 		font-size: 30%; */
		/* 		font-size: 3vw; */
	}

}
@media only screen and (max-width: 370px) {
	.ideaFactory-mainPhoto .ideaFactory-picText {
		font-size: 125%;
		
	}

	.ideaFactory-mainPhoto .ideaFactory-picText .ideaFactory-smText {
		
		font-size: 50%;
	}

	.container-4x3-text{
		/* 		font-size: 75%; */
		/* 		font-size: 2.75vw; */
	}

}