/* =============================================================
GOOGLE FONT
============================================================ */

@import url(http://fonts.googleapis.com/css?family=Ubuntu); /* FREE GOOGLE FONT */
/* @import url(http://fonts.googleapis.com/css?family=Oswald); */ 
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300&subset=latin-ext); /* FREE GOOGLE FONT */


/* =============================================================
GENERAL STYLES
============================================================ */
body {
	position: relative;
	font-family: 'Ubuntu', sans-serif;
	color: #fff;
	background: #222 url("../img/bg.jpg") top center;
}

section {
	position: relative;
	padding-top: 80px;
	padding-bottom: 40px;
}

.pad-bottom {
	padding-bottom: 60px;
}

.header {
	font-family: 'Oswald', sans-serif;
	padding-bottom: 40px;
	text-transform: uppercase;
}

.header hr {
	width: 50px;
	border-top: 2px solid rgb(40, 141, 203);
}


/* =============================================================
CUSTOM BUTTON STYLES
============================================================ */
.button-custom {
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	margin: 25px 5px 5px 0px;
	margin: 5px;
}

.btn-custom-one {
	background-color: transparent;
	color: #fff;
	border: 2px solid rgb(40, 141, 203);
}

.btn-custom-one:hover {
	background-color: rgb(40, 141, 203);
	text-decoration: none;
	color: #fff;
}

.btn-custom-two {
	color: #fff;
	background-color: rgb(40, 141, 203);
	border: 2px solid rgb(40, 141, 203);
}

.btn-custom-two:hover {
	border: 2px solid rgb(40, 141, 203);
	text-decoration: none;
	color: #fff;
	background-color: transparent;
}


/* =============================================================
MENU SECTION STYLES
============================================================ */
.navbar-inverse {
	background-color: rgba(0, 0, 0, 0.6);
	border-color: transparent;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
	background-color: transparent;
	border-bottom: 1px solid rgb(40, 141, 203);
}

.navbar-inverse .navbar-nav > li > a {
	font-size: 11px;
	font-weight: 800;
	padding: 5px 0px;
	letter-spacing: 2px;
	margin: 12px 5px 10px 5px;
	color: #FFF;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover {
	color: #fff;
	font-weight: 800;
	font-size: 12px;
	padding: 2px 15px 0 15px;
	line-height: 50px;
	vertical-align: baseline;
	text-transform: uppercase;
}

.navbar-inverse .navbar-brand > img {
	display: inline;
	vertical-align: middle;
	margin-right: 10px;
	margin-top: -2px;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border-color: transparent;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
	background-color: rgb(40, 141, 203);
}

.navbar-inverse .navbar-toggle {
	border-color: rgb(40, 141, 203);
}


/* =============================================================
HOME SECTION STYLES
============================================================ */

#home {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 50px;
	text-align: center;
	background-color: white;
	z-index: 10;
	color: black;
}

#home.smaller {
	padding-top: 15px;
}

#main-logo
{
	
}

#main-logo.smaller
{
	width: 150px;
	height: auto;
}

#main-logo.smallest
{
	width: 100px;
	height: auto;
}

/*Carousel Slider*/

#carousel-slider {
	padding: 50px 20px 5px 20px;
}

#carousel-slider.smaller {
	padding: 20px 10px 5px 10px;
}

#carousel-slider.smallest {
	padding: 5px;
}

#carousel-slider .carousel-inner .item
{
	min-height: 150px;
}

#carousel-slider.smaller .carousel-inner .item
{
	min-height: 100px;
}

#carousel-slider.smallest .carousel-inner .item
{
	min-height: 50px;
}


#carousel-slider .carousel-inner .item h3
{
	font-size: 30px;
	line-height: 38px;
	font-family: 'Oswald', sans-serif;
}

#carousel-slider.smaller .carousel-inner .item h3
{
	font-size: 18px;
	line-height: 22px;
	margin-top: 10px;
	margin-bottom: 5px;
}

#carousel-slider.smallest .carousel-inner .item h3
{
	font-size: 16px;
	line-height: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
}



.langChange
{
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 5px 35px 5px 10px;

	background: #f5f5f5;
	color: black;
	font-size: 12px;
	text-align: left;
	border-radius: 5px;
	box-shadow: 0 1px 0 rgba(0,0,0,0.2);
	cursor: pointer;
	outline: none;

	z-index: 10;
}

.langChange > div > img
{
	height: 12px;
	width: auto;
	vertical-align: middle;	
}

.langChange:after
{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -3px;
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: #288dcb transparent;
}

.langChange .dropdown
{
	position: absolute;
	top: 100%;
	right: 0;

	background: #fff;
	border-radius: 5px 0 5px 5px;
	border: 1px solid rgba(0,0,0,0.2);
	border-top: none;
	border-bottom: none;
	list-style: none;
	transition: all 0.3s ease-out;

	padding: 0;
	margin: 0;

	width: 100px;
	max-height: 0;
	overflow: hidden;
}

.langChange .dropdown li
{
	border-top: 1px solid rgba(0,0,0,0.2);
	padding: 0 5px;
}

.langChange .dropdown li a
{
	display: block;
	text-decoration: none;
	color: #333;
	padding: 5px 0;
	border-bottom: 1px solid #e6e8ea;
}

.langChange .dropdown li:last-of-type a
{
	border: none;
}

.langChange .dropdown li img
{
	height: 12px;
	width: auto;
	margin-right: 5px;
	color: inherit;
	vertical-align: middle;
}

.langChange .dropdown li:hover a
{
	color: #288dcb;
}

.langChange.active
{
	border-radius: 5px 5px 0 0;
	background: #288dcb;
	box-shadow: none;
	border-bottom: none;
	color: white;
}

.langChange.active:after
{
	border-color: #82d1ff transparent;
}

.langChange.active .dropdown
{
	border-bottom: 1px solid rgba(0,0,0,0.2);
	max-height: 400px;
}


.langChange.menu
{
	position: relative;
	top: auto;
	right: auto;
	margin: 14px 5px 10px 5px;
	background: rgba(0,0,0,0.25);
	color: white;
}

.langChange.menu .dropdown
{
	background: rgba(0,0,0,0.75);
	color: white;
}

.langChange.menu .dropdown li,
.langChange.menu .dropdown li a
{
	color: white;
}

/* =============================================================
SERVICES SECTION STYLES
============================================================ */

.flickerFix
{
	-webkit-backface-visibility: hidden;
}

#services .important-text
{
	margin: 35px 0 15px 0;
	padding: 10px;
	font-style: italic;
	font-size: 25px;
	border-bottom: 1px solid rgb(40, 141, 203);
	display: inline-block;
	line-height: 1.75em;
	text-transform: none;
}

#services .services-wrapper {

	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;

}

#services .services-wrapper .flipper
{

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;

	position: relative;

	text-align: center;
	width: 100%;
	min-height: 150px;
	padding: 20px;
	margin-bottom: 40px;
	cursor: pointer;
}


#services .services-wrapper:hover .flipper,  
#services .services-wrapper.hover .flipper
{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}


#services .services-wrapper:hover .flipper .front,
#services .services-wrapper.hover .flipper .front
{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

#services .services-wrapper:hover .flipper .back,
#services .services-wrapper.hover .flipper .back
{

	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

#services .services-wrapper .flipper .back,
#services .services-wrapper .flipper .front
{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-o-transition: 0.6s;
	transition: 0.6s;

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#services .services-wrapper .flipper .front
{
	z-index: 2;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

#services .services-wrapper .flipper .back
{
	z-index: 1;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	padding: 10px 12px;
	text-align: left;
}


#services .services-wrapper h3 {
	font-family: 'Oswald', sans-serif;
}


#services .services-wrapper .flipper .back h3 {
	font-family: 'Oswald', sans-serif;
	padding: 0;
	margin: 0;
	font-size: 21px;
	font-weight: 300;
	line-height: 26px;
}

#services .services-wrapper i {
	margin: 5px;
	color: rgb(255,255,255);
	font-size: 60px;
}

@media (min-width: 768px) {

	#services .services-wrapper i {
		color: rgb(40, 141, 203);
	}

}

/*============================
PRICING SECTION STYLES
==============================*/

.light-pricing {
	margin-bottom: 30px;
	margin-top: 50px;
	text-align: center;
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	line-height: 30px;
	cursor: pointer;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.light-pricing:hover {
	background-color: transparent;
}

.light-pricing ul {
	list-style: none;
	margin: 0;
	text-align: center;
	padding-left: 0px;
}

.light-pricing ul li {
	padding-top: 20px;
	padding-bottom: 20px;
	cursor: pointer;
}

.light-pricing ul li i {
	margin-right: 5px;
}

.light-pricing .price {
	padding: 40px 20px 20px 20px;
	font-size: 60px;
	font-weight: 900;
}

.light-pricing .price small {
	color: #000;
	display: block;
	font-size: 15px;
	margin-top: 22px;
}

.light-pricing .type {
	background-color: rgba(0, 0, 0, 0.40);
	padding: 30px 20px;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 30px;
	color: rgb(40, 141, 203);
}

.light-pricing .pricing-footer {
	padding: 20px;
}

.db-attached > .col-lg-4,
.db-attached > .col-lg-3,
.db-attached > .col-md-4,
.db-attached > .col-md-3,
.db-attached > .col-sm-4,
.db-attached > .col-sm-3 {
	padding-left: 0;
	padding-right: 0;
}

.light-pricing.popular {
	margin-top: 10px;
}

.light-pricing.popular .price {
	padding-top: 80px;
}


/*============================
WORK SECTION STYLES
==============================*/

#references .caegories a.active {
	background-color: transparent;
	color: #fff;
}

.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
}

#references .reference-wrapper {
	display: block;
	position: relative;
	padding: 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 40px;
	background-color: rgba(255, 255, 255, 0.1);
	cursor: pointer;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	border: 1px solid rgb(40, 141, 203);
	overflow: hidden;
	text-align: center;
	text-decoration: none;
}

#references .reference-wrapper .reference-wrapper-inner
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: -110%;
	left: 0px;
	z-index: 5;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	background: rgba(0,0,0,0.8);
	padding: 30px;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.5em;
	color: white;
	font-family: Oswald, sans-serif;
	text-align: center;
	vertical-align: middle;
}

#references .reference-wrapper .reference-wrapper-inner p
{
	margin-top: 12px;
	text-align: left;
}

#references .reference-wrapper img
{
	margin: 0px auto;
}

#references .reference-wrapper h4
{
	font-size: 20px;
}

#references .reference-wrapper:hover {
	background-color: transparent;
	border: 1px solid rgb(40, 141, 203);
	opacity: .80; /* standard: ff gt 1.5, opera, safari */
	-ms-filter: "alpha(opacity=80)"; /* ie 8 */
	filter: alpha(opacity=80); /* ie lt 7 */
	-khtml-opacity: .80; /* safari 1.x */
	-moz-opacity: .80; /* ff lt 1.5, netscape */
}

#references .reference-wrapper:hover .reference-wrapper-inner {
	top: 0%;
}

#references .reference-wrapper h4 {
	padding-top: 10px;
	z-index: 3;
}

#references .reference-wrapper span {
	z-index: 3;
}



/*============================
CONTACT SECTION STYLES
==============================*/

#contact .contact-wrapper {
	background-color:rgba(255, 255, 255, 0.1);
	padding: 20px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 40px;
	min-height:200px;
}

#contact .contact-wrapper h3 {
	color:rgb(40, 141, 203);
}

#contact .social-below {
	display: block;
	margin-top: 5px;
}

.footer-div {
	padding-top:25px;
}

.footer-div a,.footer-div a:hover {
	font-size:10px;
	color:#fff;
	text-decoration:none;
}


#menu-section
{
	z-index: 999;
	top: -100px;
	-webkit-transition: top 1s ease-out;
	-moz-transition: top 1s ease-out;
	-o-transition: top 1s ease-out;
	transition: top 1s ease-out;
}

#menu-section.showMenu
{
	top: 0px;
}


#scrollGraphics
{
	background: url("../img/bg.jpg") top center;
	padding-top: 555px;
	display: block;
	position: relative;
}

#top-shadow
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: url("../img/shadow.png") top left repeat-x;
}


#scrollGraphics.smaller
{
	padding-top: 0px;
}

.iosFixedZindexFix
{
	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-ms-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);
}

.scrollFix .general-display-class
{
	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-ms-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);

	-webkit-transform: translate3d(0,0,0) !important;
	-moz-transform: translate3d(0,0,0) !important;
	-ms-transform: translate3d(0,0,0) !important;
	-o-transform: translate3d(0,0,0) !important;
	transform: translate3d(0,0,0) !important;
}

#scrollThinkingTextOuter,
#scrollTmpTextOuter,
#scrollEndText1Outer,
#scrollEndText2Outer
{
	position: relative;
	width: 100%;
	min-height: 50px;

	text-align: center;
	font-size: 24px;
	line-height: 1.3em;
}


#scrollEndText1Outer,
#scrollEndText2Outer
{
	position: absolute;
}

#scrollThinkingText,
#scrollTmpText,
#scrollEndText1,
#scrollEndText2
{
	position: absolute;
	opacity: 0;
	left: 0;
	bottom: -200px;
	width: 100%;
	height: 100%;
}


#scrollThinking,
#scrollSuggestions,
#scrollSolutions
{
	position: relative;
	width: 100%;

	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}




#scrollSitting,
#scrollPeople,
#scrollHappyPeople
{
	position: relative;
	width: 100%;
	max-width: 100%;
	top: 250px;
}

#scrollSitting
{
	top: 0;
	opacity: 1;
}


.general-display-class
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	top: 250px;
	opacity: 0;
	text-align: center;
}

.general-display-class.notop
 {
 	top: 0px;
 }

.general-display-class img
{
	width: 100%;
	max-width: 100%;
	height: auto;
}

#scrollPuzzleFull, #scrollPeople, #scrollHappyPeople
{
	opacity: 0;
}


#bgvid
{
	display: none;

	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;

	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

#bgCover
{
	display: none;

	background-position: fixed;
	background-size: cover;
	background-position: center center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -90;
}


#chevron
{
	position: absolute;
	bottom: -1210px;
	height: 2000px;
	width: 100%;
	z-index: -10;
	overflow: hidden;
}


#chevron.smaller
{
	bottom: -1180px;
}


#slogan-small
{
	position: absolute;
	bottom: -110px;
	left: 5%;
	text-align: center;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);
	width: 90%;
	height: 25px;
	font-size: 23px;
	color: #288dcb;
}


#slogan-small.smaller
{
	bottom: -50px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	transform: rotate(-5deg);
}


#chevron #slogan
{
	display: none;
	position: absolute;
	bottom: 10px;
	right: 20px;
	font-size: 24px;
	color: #288dcb;
}


#chevron #chevronLeft
{
	position: absolute;
	display: block;
	left: 65%;
	bottom: 50%;
	margin-left: -1980px;
	margin-bottom: -200px;
	width: 2000px;
	height: 2000px;
	background: #fff;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
}


#chevron.smaller #chevronLeft
{
	margin-left: -1700px;
	margin-bottom: 80px;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}


#chevron #chevronRight
{
	position: absolute;
	left: 65%;
	bottom: 50%;
	margin-left: -400px;
	margin-bottom: -100px;
	display: block;
	background: #fff;
	width: 3000px;
	height: 2000px;
	-webkit-transform: rotate(70deg);
	-moz-transform: rotate(70deg);
	-o-transform: rotate(70deg);
	-ms-transform: rotate(70deg);
	transform: rotate(70deg);
}