/* CSS Document */

html {
	height: 100%;
}
body {
	font-family: 'Oxygen', sans-serif;
	font-size: 16px;
	color: #23292E;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nav-sticky {
    z-index: 7;
    width: 100%;
}


.shadow {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}


.workBox {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    padding: 75px 0;
    width: 100%;
    /* height: calc(400px - 80px); */
    margin-bottom: 30px;
    overflow: hidden;
}

/*
.workBox:before {
     position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #23292e;
    content: "";
    transform: rotate(-5deg) scale(2) translateY(-70%);
    z-index: 7;
}
*/

/*
.workBox:after {
     position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 20%;
    width: 100%;
    background-color: #23292e;
    content: "";
    transform: rotate(-5deg) scale(2) translateY(250%);
    z-index: 7;
}
 */

.workThumb:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0, .5);
    content: "";
}

.workBox img {
    margin: 0 auto;
}

.workThumb {
    transition-duration: .5s;
    transition-delay: .2s;
}

.workLabel {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    padding: 15px 30px;
    background: #fff;
    color: #333;
    transform: translateX(-100%);
    transition: .5s all ease;
}

.workBox:hover .workLabel {
    transform-origin: center;
    transform: translateX(5%);
    transition-delay: .1s;
}


.workTitle {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 2.5rem;
    left: 0;
    transform: translateX(-100%);
    width: 75%;
    padding: 30px;
    background: #fff;
    color: #333;
    transition: .5s all ease;
    transform-origin: top left;
}


.workBox:hover .workTitle {
    transform-origin: center;
    transform: translateX(5%);
    transition-delay: .2s;
}

.workBox:hover .workThumb.background-image-holder {
    transform: scale(1.25);
    transform-origin: center;
}



.workLogo {
    position: absolute;
    display: inline-block;
    text-align: center;
    max-height: 100px;
    max-width: 175px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}



/* Shift styles */

.customGrid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    max-width: 100%;
    width: 100%;
    -webkit-transition: height .2s;
    transition: height .2s;
    will-change: height;
    display: flex;
}

.customGrid-item {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

.customGrid-item .inner {
    /* width: calc(100% - 35px); */
}


.inner {
    width: 100%;
    height: 100%;
    /* min-height: calc(156px - 70px); */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 7px solid pink;
}

.customGrid-item .inner-box {
    width: 100%;
}

.work-card {
    position: relative;
    overflow: hidden;
}

.no-touch .work-card-image {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 4px solid green;
}

.no-touch .work-card-logo, .work-card-logo {
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.work-card-logo {
    position: absolute;
    left: 50%;
    z-index: 1;
}


.inner .work-card-image {
    position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
}

/* End Shift styles */


.imageBoxContainer {
	position: absolute;
	display: block;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 100%;
	text-align: right;
	border: 0px solid;
}
.imageBox {
	position: relative;
	display: inline-block;
	margin: 0px;
	height: 200px;
	width: 200px;
	border: 1px solid rgba(0,0,0, .05);
}
.imageBoxContainer div {
	background: rgba(0,0,0, .05)
}
.button {
	position: relative;
	display: inline-block;
	padding: 1.2em 1.4em;
	padding-right: 50px;
	margin-top: .8em;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #ffffff;
	text-transform: uppercase;
	overflow: hidden;
	background-color: transparent;
	border: 7px solid rgba(255,255,255, .25);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
.button:after {
	font-family: "FontAwesome";
	font-size: 16px;
	position: absolute;
	display: inline-block;
	right: 20px;
	content: "\f078";
	transform: rotate(-90deg);
}
.button:hover {
	background-color: rgba(231,76,60,1.00);
	color: #fff;
}
.button span {
	position: absolute;
	display: inline-block;
	top: -10%;
	right: -5%;
	height: 100%;
	border: 1px solid;
	padding: auto;
}
.cd-btn {
	display: inline-block;
	padding: 1.2em 1.4em;
	margin-top: .8em;
	background-color: rgba(231,76,60,1.00);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: #ffffff;
	text-transform: uppercase;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
/*.button:after {
	font-family: "FontAwesome";
	font-size: 30px;
	content: "\f0ed";
	color: #fff;
	padding: 0 0.7em 0 0;
	margin: 0;
	border: 0px solid;
}*/

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gray {
	background-color: #23292E !important;
	color: #fff !important;
}
.white {
	background-color: #fff !important;
	color: #23292E !important;
}
.titleIconBoxes {
	box-sizing: border-box;
}
.titleIconBoxes * {
	border: 0px solid;
}
/*
.titleIconBoxes [class*=col] {
	height: 100%;
	vertical-align: middle;
	margin: 0;	
}
*/

.titleIconBox {
	box-sizing: border-box;
	display: table-cell;
	position: relative;
	width: auto;
	height: 120px;
	margin: 1px;
	vertical-align: middle;
	border-top: 0px solid rgba(231,76,60,1.00);
    /*background: rgba(0,0,0, .05); */
	transition: all .5s ease-out;
	border: 1px solid rgba(255,255,255, .025);
}

.titleIconBox:hover {
	cursor: pointer;
	background: rgba(0,0,0, 0);
	outline: 10px solid rgba(255,255,255, .5);
}
.titleBox h3 {
	font-size: 15px;
	line-height: 17px;
	margin-bottom: 0;
	position: relative;
	text-transform: uppercase;
}
.titleBox {
	position: relative;
	display: table-cell;
	/*width: 50%;*/
	vertical-align: middle;
	padding-left: 20px;
	padding-right: 5px;
}
.titleBox:before {
	position: absolute;
	display: block;
	height: 25px;
	width: 25px;
	font-family: "FontAwesome";
	font-size: 16px;
	content: "\f078";
	color: rgba(231,76,60,1.00);
	bottom: 10px;
	right: 0px;
	transform: rotate(-45deg);
}



#what .titleBox:before, #project .titleBox:before {
	display: none;
}

#project .titleBox {
	/*position: relative;
	display: table-cell;
    text-align: center;*/
    text-align: center;
    display: inline-block;
    height: 165px;
    width: 160px;
    justify-content: center;
    align-items: center;
	vertical-align: top;
	padding-left: 5px;
	padding-right: 5px;
}

.iconBox {
	position: relative;
	display: table-cell;
	width: 50%;
	text-align: center;
	vertical-align: middle;
	margin-left: 10px !important;
	overflow: hidden;
}
.iconBox img {
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	margin-left: 10px;
}
.iconBox.video:after {
	position: absolute;
	display: block;
	font-family: "FontAwesome";
	font-size: 75px;
	line-height: 1em;
	width: 100%;
	content: "\f01d";
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999999999 !important;
	opacity: .4;
}
.iconBox.video img, .iconBox.sound img {
	opacity: .5;
}
.iconBox.sound:after {
	position: absolute;
	display: block;
	font-family: "FontAwesome";
	font-size: 60px;
	line-height: 1em;
	width: 100%;
	content: "\f028";
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999999999 !important;
	opacity: .4;
}
.divider {
	display: block;
	height: 70px;
	width: 100%;
	background: #000;
	border: 0px solid
}
p.ptitle {
	font-size: 20px;
	line-height: 22px;
	font-weight: bold;
	margin-bottom: 15px;
}
.cd-slider-nav li a:before {
	font-family: "FontAwesome";
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 25px;
	content: "\f077 ";
	color: #e74c3c;
	height: 20px;
	width: 20px;
}
.cd-slider-nav li span {
	position: absolute;
	display: block;
	text-align: left;
	width: 45%;
	font-size: 14px;
	line-height: 1em;
	bottom: 20px;
	left: 20px;
	color: #fff;
	z-index: 0;
}
.divider:before {
/* display: block;
	content: "";
	height: 100%;
	width: 100%;
	background: rgba(29,112,183,.7); */
}
.small {
	font-size: 95% !important;
	line-height: 1.5em !important;
}
.blog-filters {
	padding: 0px;
	list-style: none;
	overflow: hidden;
	display: inline-block;
	margin-bottom: 32px;
}
.blog-filters li {
	float: left;
	margin-right: 16px;
	font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	cursor: pointer;
}
.blog-filters li:last-child {
	margin-right: 0px;
}
.blog-filters li.active {
	border-bottom: 2px solid #3498db;
}
.clientQuote {
}
.clientQuote p {
	display: block;
	font-family: "Museo Sans";
	font-size: 25px;
	font-weight: 700;
	margin-bottom: 10px;
}
.quoteMark {
	font-family: "proxima-nova";
	font-size: 7em;
}
.btn-primary {
	border: 7px solid rgba(255,255,255, 1);
	border-radius: none;
}
a {
	transition: all .2s ease;
}
a:hover {
	text-decoration: none;
}
ul, li {
	margin: 0;
	padding: 0;
}
.no-pad {
	padding: 0px;
}
.vertical {
	position: relative;
}
section {
	position: relative;
	padding-top: 100px;
	padding-bottom: 90px;
	overflow: hidden
}
section .container {
/* z-index: 2 !important; */	
}

section.parallax::after {
	
}

.backgroundShape {
	position: absolute;
	content: "";
	top: 0px;
	display: block;
	height: 1700px;
	width: 1700px;
	transform: skewX(-30deg);
	/* transform-origin: center; */
	border-radius: 0;
	z-index: .5;
}
.cd-hero .backgroundShape {
	position: absolute;
	content: "";
	display: block;
	height: 1700px;
	width: 2000px;
	background: rgba(35,41,46,.7);
	transform: skewX(45deg) translateX(0%);
	/* transform-origin: center; */
	border-radius: 0;
	z-index: .5;
	border: 0px solid;
	display: none;
}
.sectionDivider {
	position: relative;
	display: block;
	width: 100;
	height: 0;
	text-align: center;
	overflow: visible;
}
.marker {
	position: absolute;
	top: -30px;
	display: table-cell;
	height: 60px;
	width: 60px;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid #fff;
	;
	border-radius: 100%;
	background: #3c3c3b;
}
.marker:before {
	display: block;
	height: 20px;
	width: 20px;
	border: 1px solid #333;
}
p.billboardText {
	position: absolute;
	font-size: 90% !important;
	letter-spacing: .05em !important;
	display: inline-block;
	width: 25% !important;
	margin-bottom: 2.1em !important;
	bottom: 180px;
	right: 0;
	border: 0px solid;
}
p.billboardText strong {
	display: block;
	clear: both;
	text-transform: uppercase;
	margin-bottom: 7px;
	padding-bottom: 7px;
	border-bottom: 1px dashed rgba(255,255,255, .2);
}
section .container {
	position: relative;
	z-index: 4;
	perspective: 700;
}
.backgroundImage {
	position: absolute;
	top: 0;
	right: 0;
	opacity: 1;
	transform: scaleX(1) translateX(15%);
	filter: grayscale(50%);
	z-index: 0;
	display: none;
}
/*
.slideNavWrapper {
	display: block;
	width: 100%;
	background-color: rgba(0,0,0, 0);
	transform: skewX(0deg);
}

.slideNavWrapper li {
	transform: skew(0deg);	
}

ul.slideNav li {
	display: inline-block;
}

*/

ul.slideNav {
	display: inline-block;
	margin-left: -15px;
	margin-bottom: 10px !important;
	background-color: rgba(0,0,0, 0);
	border: 0px solid rgba(255,255,255,.2);
	overflow: visible;
}
ul.slideNav li a, ul.filters li a {
	display: inline-block;
	color: #fff;
}
 ul.slideNav li a:selected {
 border: 4px solid #fff;
}
ul.slideNav li:first-child a {
	padding-left: 0px;
}
ul.slideNav li:last-child a {
	padding-right: 0px;
}
/*div.slideNav {
	display: inline-block;
	float: right;
	background-color: rgba(255,255,255,.1);
}

div.slideNav div {
	font-family: "museo_sans700";
	font-size: 14px;
	line-height: 14px;
	font-weight: 900;
	text-transform: uppercase;
	display: inline-block;
}

div.slideNav div a {
	display: inline-block;
	padding: 20px 15px;	
	color: #fff;
}

div.slideNav div:first-child a {
	padding-left: 30px;
}

div.slideNav div:last-child a {
	padding-right: 30px;
}*/


.subTitle {
	font-size: 12px;
	font-weight: 700;
	/* color: rgba(173,173,173,1); */
	text-transform: uppercase;
	margin-bottom: 1.25em;
	letter-spacing: .1em;
}
.dateBar {
	margin: 2em 0;
}
/* Social Icons Bar */


ul.socialBar {
	display: block;
	padding: 0;
	text-align: left;
}
ul.socialBar li {
	display: inline-block;
	margin-left: 7px !important;
}
ul.socialBar li a {
	display: table-cell;
	font-family: "FontAwesome";
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	height: 55px;
	width: 55px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	color: rgba(255,255,255,1);
	border-radius: 50%;
	border: 0px solid;
	background: rgba(255,255,255, 1);
}
.modal ul.socialBar li a {
	color: rgba(0,0,0, .5);
	background: none;
	border: 0px solid rgba(60,60,59,0.25);
}
ul.socialBar li a.facebook:before {
	content: "\f09a";/* background: url(../img/social/facebook.png) 0 0 no-repeat; */
}
ul.socialBar li a.twitter:before {
	content: "\f099";/* background: url(../img/social/twitter.png) 0 0 no-repeat; */
}
ul.socialBar li a.linkenIn:before {
	content: "\f0e1";/* background: url(../img/social/linkedin.png) 0 0 no-repeat; */
}
/*.social i {
	text-align: center;
	border-radius: 50%;
	padding: 10px;
	background: #3c3c3b;
	background: rgba(60,60,59,0.9);		
}*/

.topBar {
	display: block;
	position: relative;
	height: 40px;
	background: #fff;
	font-size: 11px;
	color: #3c3c3b;
	border-bottom: 1px solid rgba(0,0,0, .1);
	vertical-align: middle;
}
.topBar .social {
	display: inline-block;
	position: relative;
	font-size: 17px;
	border: 1px solid;
	top: 50%;
	transform: translateY(-50%);
}
.topBar .social i {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	height: 30px;
	width: 30px;
	margin-left: 7px;
}
h1, h2, h3, h4, h5 {
	margin-top: 0px;
	padding: 0;
	font-family: "museo_sans700";
}
h1 {
	/* font-size : 100px; */
	font-size: 100px;
	/* line-height : 79px; */
	line-height: 70px;
	letter-spacing : -.05em;
	margin-bottom: 50px;/* text-shadow: 2px 2px 7px rgba(0,0,0,.2) */
}
section h1 {
	margin-bottom: .4em;
}

h2 {
	font-size: 60px;
	line-height: 1em;
	margin-bottom: .5em;
	letter-spacing: -.05em;	
}

h2 span {
	color: #e74c3c;
}

h3 {
	font-size : 25px;
	line-height : 25px;
	letter-spacing : -.03em;
	margin-bottom: 35px;
}
h4 {
	font-size: 1.4rem;
	fon-weight: normal;
	font-weight: 700;
	letter-spacing: 1px;
	color: #ffffff;
	text-transform: uppercase;
}
p {
	font-family: 'adelle-sans', 'Oxygen', sans-serif;
	font-size : 15px;
	font-weight: 300;
	line-height : 1.5em;
	position : relative;
	margin-top : 0px;
	margin-bottom: 2em;/* color : #FFFFFF;
  color : rgb(255, 255, 255); */
}
/* Topbar */

/*

.top-bar {
	height: 150px;
	padding-top: 44px;
	background-color: #fff;
	overflow: hidden;
}


.nav-sticky {
	position: fixed;
	top: 0;
	height: auto;
	min-height: 115px !important;
	
	width: 100%;
	padding-top: 20px;
	z-index: 9999999999;	
	transition: height, padding;
	transition-duration: .5s;
}

*/

.mainLogo {
	margin-left: -45px;
	transition: transform, margin;
	transition-duration: .1s;
	transform-origin: 0, 0;
	transform: scale(.8);
}
.navbar-default .logo-light {
	display: inline-block;
}
.navbar-default .logo-dark {
	display: none;
}
.navbar-default.navbar-fixed-top .logo-light {
	display: none;
}
.navbar-default.navbar-fixed-top .logo-dark {
	display: inline-block;
}
.navbar-default {
	background: rgba(255,255,255, .9);
}
.navbar-default li a {
	color: #fff;
}
.navbar-default.navbar-fixed-top {
	padding-top: 0px;
	min-height: 50px;
}
.navbar-default.navbar-fixed-top li a {
	color: #3c3c3b;
}
/* .nav-sticky .mainLogo { */
.navbar-fixed-top .mainLogo {
	transform: scale(.7);
	margin-left: -50px;
}
/* Billboard */



/*.slick-slider {
    margin-bottom: 0px;
} */


.slick-list {
	/* height: 500px; */
    height: auto;
}
.slick-prev::before, .slick-next::before {
	font-family: 'FontAwesome';
	font-size: 20px;
	line-height: 1;
	opacity: .75;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.slick-next::before {
	content: '\f054';
}
#billboard {
	position: relative;
	height: 730px;
	padding-top: 0;
	padding-bottom: 0;
	background-color: #1d1d1b;
	color: #fff;
}
.billboards {
}
.billboard {
	height: 730px !important;
	padding-top: 100px;
}
.billboard h1 span {
	color: #e74c3c;
}
#what h1 span {
	color: #3F3B31;
	color: #23292E;
}
.billboard img.billboardImage {
	position: absolute;
	top: 0;
	height: auto;
	width: 100%;
	transform: scale(1);
	z-index: 0;
	opacity: .4;
}
.billboardNav.slick-slider{
	position: absolute;
	bottom: 100px;
	margin-left: 50%;
	margin-bottom: 0;
	transform: translateX(-50%);
	overflow: visible !important;
}
.billboardNav .slick-slider {
	height: 95px;
}
.billboardNav .slick-slide {
}
.billboardNav .slick-slide img {
	width: 100%;
}
.billboardNav .preview {
	display: block;
	height: 95px;
	width: 278px;
}
.billboardNav .preview.slick-current {
	transition: outline .2s ease-in-out;
	outline-style: solid;
	outline-color: white;
	outline-width: 20px;
}
.slick-list {
	overflow: visible;
}
.slick-dots li button {
	border-radius: 50%;
	background: #fff !important;
}
.content .col1 p:first-child:first-letter {
	font-family: "museo_sans700";
	float: left;
	color: #fff;
	font-size: 50px;
	line-height: 60px;
	padding-top: 10px;
	padding-right: 8px;
	padding-left: 3px;
}
.highlight {
	display: block;
	width: 256px;
	font-family: "museo_sans700";
	font-size: 14px;
}
.highlight .img {
	display: inline-block;
	width: 100%;
	height: 95px;
	outline: 10px solid rgba(255,255,255, 1);
	margin-bottom: 12px;
	clear: both;
	background: #333;
}
.highlight .smallTitle {
	margin-left: -10px;
}
.highlight .smallTitle {
	display: block;
	margin-bottom: 22px;
	font-family: "museo_sans900";
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.highlight .title {
}
.highlight .smallTitle i {
	margin-right: 7px;
}
.highlight p {
	font-family: "museo_sans700";
	line-height: 18px;
	margin-left: -10px;
}
/* Who We Are */

#who {
	background-color: #315975;
	/* background-color: #2F5671; */
	color: #fff;
	overflow: hidden;
	border-top: 20px solid rgba(255,255,255, .025)
}
#who:before {
	position: absolute;
	display: block;
	top: 0px;
	content: "";
	height: 100%;
	width: 100%;
	background: rgba(0,0,0, .025);
	transform: skewX(-15deg) translateX(-20%)
}
#who h1 span {
	color: #E77569;
	color: rgba(231,76,60,1.00);
}
#who .backgroundShape {
	position: absolute;
	background-color: #315975;
	background-color: rgba(0,0,0,.1);
	transform: skewX(30deg) translate(-25%, -20%);
	z-index: .5;
	border: 1px solid rgba(255,255,255, .05)
}
#who .backgroundImage {
	position: absolute;
	top: 0px;
	right: -5%;
	height: 100%;
	opacity: .2;
	filter: grayscale(100%);
	z-index: 0;
}
/*
#who .toolIcons .iconGroup {
	text-align: left;
	height: 110px;
	margin: 0;
	padding: 0;
	border: 0px solid rgba(255,255,255, .2);
}
*/

#who .toolIcons [class*=col] {
	margin-bottom: 0;
	margin-right: 0;
	padding: 0;
}
.toolIcons {
}
#who .toolIcons div.iconGroup {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	height: 120px;
	width: 99%;
	margin: 1px;
	padding: 0;
	background: rgba(0,0,0, .07);
	border: 0px solid rgba(255,255,255, 1);
	border-radius: 0;
	border-top-right-radius: 0;
}
#who .toolIcons .iconGroup img {
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
}
#who .toolIcons .iconGroup img:hover {
	opacity: 1;
}
#who .whoSlide {
	position: relative;
}
#who .whoSlide .iconGroup img {
	max-width: 100px;
	margin: auto;
	border: 0px solid;
}
#who .slick-next {
	right: 0px;
}
#who .slick-prev {
	left: 0px;
	display: none !important;
}
#who .slick-prev, #who .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 125px;
	display: block;
	/* width: 50px;
	height: 200px; */
	
	height: 100px;
	width: 100px;
	right: -50px;
	padding: 0;
	margin-top: -10px;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	border-radius: 50%;
	outline: none;
	background: #e74c3c;
}
.skewBox {
	position: relative;
	display: block;
	height: 150px; 
	width: 100%;
	background: rgba(0,0,0, 0);
	background: #315975;
	background: rgba(0,0,0, 0);
	margin-left: 0%;
	padding: 20px auto !important;
	transition: width .2s;
	transform: skewX(0deg);
	overflow: hidden;
	border-right: 1px dashed rgba(255,255,255, .2);
	z-index: 7;
}
.skewBox > * {
	transform: skewX(0deg) !important;
}
.skewBox:hover {
	width: 125%;
	background: rgba(49,89,117,1);
	overflow: visible; 
	z-index: 9999;
}

.skewBox:hover #who .process .small {
	opacity: 1 !important;
}


.skewBox:hover > h4 {
	top: -40px;
	opacity: 1;	
	transform: translateY(-20px);
	transition-delay: .2s;
}

.skewBox .step {
	position: absolute;
	top: 0px;
	left: 0;
	display: table-cell;
	box-sizing: border-box;
	padding: 7px;
	height: 30px;
	width: 30px;
	background: none;
	color: #fff ;
	font-size: 11px;
	font-weight: 700;
	line-height: 1em;
	text-align: center;
	vertical-align: center;
	border-radius: 50%;
	transition: all .2s
}
.skewBox:hover .step {
	background: rgba(231,76,60,1.00);
	color: #fff;
	height: 45px;
	width: 45px;
	font-size: 14px;
	top: -10%;
	left: -10%;
}

.skewBox h4 {
	position: absolute;
	display: block;
	padding: 10px;
	background: rgba(231,76,60,1.00);
	opacity: 0;
	top: 0px;
	left: 0px;
	transition: all .5s;
}


#who .process {
	margin-top: 30px;
}
#who .process div {
	padding: 0px 0;
}
#who .process span.content {
	display: block;
	margin: 15px;
}
#who .process .small {
	position: absolute;
	display: none;
	height: 100%;
	width: 300px;
	top: 0px;
	font-size: .9em !important;
	padding: 20px;
	background: #fff;
	color: #3c3c3b;
	opacity: 0;
}
.skewBox:hover .small {
	opacity: 1;
}
i.icon {
	font-family: 'Pe-icon-7-stroke', 'et-line';
	font-size: 50px;
	line-height: 0;
	display: block;
	height: 100px;
	width: 100px;
	/* height: 110px;
	width: 110px;  */
	
	border: 12px solid;
	border-color: rgba(0,0,0, .05);
	border-radius: 50%;
	text-align: center;
	color: #fff;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;/* position: relative;
	top: 50% !important;
	transform: translateY(-50%); */
}
/*
span[class*=pe-7s-] {
	display: table-cell;
	vertical-align: middle;
	line-height: 1em;
	height: 100px;
	width: 100px;
	border: 12px solid;
	border-color: rgba(0,0,0, .1);
	border-radius: 50%;
	text-align: center;
	color: #fff;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
*/

span[class*="pe-7s-"] {
    
    display: flex;
      justify-content: center;
      align-items: center;
    

	vertical-align: middle;
	line-height: 1em;
	height: 100px;
	width: 100px;
	border: 12px solid;
	border-color: rgba(0,0,0, .1);
	border-radius: 50%;
	/*
    text-align: center;
	color: #fff;
	margin: 0 auto;
	padding: 0;
    */
	box-sizing: border-box;
}



span[class*='pe-7s-']:before {
}

#project span[class*="pe-7s-"] {
    color: inherit;
    border-color: rgba(0,0,0, .75);
    margin: 0 auto 7px auto !important;
}

.process i {
	font-family: 'Pe-icon-7-stroke', 'et-line';
	
	line-height: 0;
	display: block;
	/* height: 104px;
    width: 104px; */
	border: 12px solid #e74c3c;
	border-color: rgba(255,255,255, .05);
	border-radius: 50%;
	text-align: center;
	color: #fff;
	margin: 0 0 0 10%;
	padding: 0;
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	transition: all .2s ease;
	transform: skewX(-15deg) translateY(-50%);
}

.process i:before, i.icon:before {
	position: relative !important;
	top: 50% !important;
	transition: all;
	transform: translateY(-50%) !important;
}
/* What We Do */

#what {
	background-color: #e74c3c;
	/* background-color: rgba(0,0,0,1); */
	color: #fff;
	border-top: 20px solid rgba(255,255,255, .025);
}
#what:before {
	position: absolute;
	display: block;
	top: 0px;
	content: "";
	height: 100%;
	width: 20%;
	background: rgba(0,0,0, .05);
	transform: skewX(-30deg) translateX(-80%);
}
#what .backgroundImage {
	position: absolute;
	top: 0px;
	right: -30%;
	height: 100%;
	opacity: .7;
	filter: grayscale(50%);
	z-index: 0;
}
#what .backgroundShape {
	background: #e74c3c;
	background: rgba(0,0,0, .1);
	/* height: 1700px; */
	width: 1400px;
	/*transform: skewX(-30deg) translate(0%, -10%); 
	border: 0px solid rgba(0,0,0, .1);
	z-index: .5; */
	border: 1px solid rgba(0,0,0, .04);
	transform: skewX(-30deg) translate(-10%, -20%);
	z-index: .5;
}
.feature {
	text-align: center !important;
}
/*
.feature-icon-large i {
    display: block;
    height: 104px;
    width: 104px;
    border: 7px solid #fff;
    border-radius: 50%;
    text-align: center;
    color: #e74c3c;
    font-size: 40px;
    padding-top: 31px;
    margin-bottom: 32px;
}
*/

.whatList ul {
	font-size: inherit;
	font-weight: 300;
	list-style: none;
	padding: 0;
}
.whatList ul li {
	position: relative;
	margin: 0;
	padding: 0px;
	font-family: "Oxygen";
	/* text-transform: uppercase; */
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .05em;
	overflow: hidden;
}
.speak i {
	display: block;
	height: 104px;
	width: 104px;
	border: 7px solid #e74c3c;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 40px;
	padding-top: 31px;
	margin-bottom: 0;
}
#what .post-meta {
	display: none;
}
/*
.whatList ul li:after {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	content: "\f007";
	padding: 10px;
	text-align: center;
	background: #F38E00;
	height: 60px;
	width: 60px;
	margin-right: 20px;	
}
*/

.whatList ul li a {
	box-sizing: border-box;
	position: relative;
	display: block;
	margin-bottom: 15px;
	padding: 30px;
	color: #fff;
	border: 1px solid rgba(0,0,0, .2);
	width: inherit;
	transition: padding, transform;
	text-transform: uppercase;
	font-size: 14px;
	overflow: hidden;
	min-height: 125px;
}
.icon {
	border: 4px solid #fff;
}
.whatList li a:hover {
	color: #3c3c3b;
	font-weight: 700;
	text-decoration: none;
}
.whatList ul li a:before {
	position: absolute;
	bottom: 0;
	left: 20px;
	font-family: "FontAwesome";
	content: "\f077";
	color: #333;
	opacity: 0;
	transition: opacity, bottom;
	transition-duration: .2s;
	transition-delay: .2s;
	transition-timing-function: ease-out;
}
.whatList ul li a:hover:before {
	opacity: 1;
	bottom: 30px;
	transform: rotate(45deg);
}
.whatList ul li a .skillText {
	position: absolute;
	bottom: 0;
	opacity: 0;
	margin-left: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.25em;
	text-transform: none;
	z-index: -1;
	transform: scale(0);
	transition: transform, width;
	transition-duration: .2s, .2s;
	transition-delay: 0s, .2s;
	transform-origin: bottom left;
}
.whatList a:hover .skillText {
	display: block;
	opacity: 1;
	padding: 20px 20px 50px 20px;
	width: 100%;
	transform: scale(1);
	margin-left: 0;
	background: rgba(255,255,255,.8);
	color: #3c3c3b;
}
/* Tools We Us */

#tools {
	background-color: #266f7f;
	background: rgba(191,191,141,1.00);
	color: #fff;
	color: #23292E;
	color: rgba(77,77,58,1.00);
	border-top: 20px solid rgba(255,255,255, .025)
}

#tools h4 {
	color: rgba(77,77,58,1.00);
}

#tools:before {
	position: absolute;
	display: block;
	top: 0px;
	content: "";
	height: 100%;
	width: 100%;
	background: rgba(0,0,0, .025);
	transform: skewX(15deg) translateX(-20%)
}
#tools h1 span {
	color: #e74c3c;
}
#tools .backgroundImage {
	position: absolute;
	bottom: 0px !important;
	left: 0;
	opacity: 1;
	height: 50%;
	width: 50%;
	transform: scaleX(-1) translateY(100%);
	z-index: 0;
}
#tools .backgroundShape {
	background: #266f7f;
	background: rgba(0,0,0, .025);
	transform: skewX(60deg) scale(1.5) translate(30%, 0%);
	z-index: .5;
	border: 1px solid rgba(255,255,255, .25);
}
#tools .row {
}
#tools .container {
}

#tools .filters li {
	color: rgba(77,77,58,1.00);
}
#tools .projects-container {
	margin-top: 0px;
	padding: 0;
}
#tools .toolIcons [class*=col] {
	margin: 0px;
	padding: 0;
}
#tools .toolIcons div.iconGroup {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	height: 120px;
	width: 16.45%;
	margin: 1px;
	padding: 0;
	background: rgba(0,0,0, .05);
	background: rgba(77,77,58, .4);	
	border: 0px solid rgba(255,255,255, .0);
	border-radius: 0;
	border-top-right-radius: 0;
}
/*
#tools .toolIcons div.iconGroup:before {
	display: inline-block;
	position: absolute;
	font-family: "FontAwesome";
	font-size: 30px;
	content: "\f077";
	color: rgba(255,255,255,.1);
	top: 0px;
	right: 0px;
	transform: rotate(45deg);
}
*/

#tools .toolIcons .iconGroup img {
	display: inline-block;
	height: auto;
	width: auto;
	margin: 0;
	padding: 0;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
/* Look at Us */

#look {
	background-color: rgba(204,200,171,.1);
	background-color: #3F3B31;
	background-color: #23292E;
	padding-bottom: 0;
	color: #fff;
	border-top: 20px solid rgba(255,255,255, .025)
}
#look .backgroundImage {
	opacity: .05;
	transform: scale(.5) translate(70%, -70%);
}
#look .backgroundShape {
	background: rgba(0,0,0,.05);
	transform: skewX(-15deg) translate(40%, -20%);
	z-index: .5;
	border: 1px solid rgba(255,255,255, .05);
}
#look h1 span {
	color: rgba(231,76,60,1.00);
}
.og-grid li > a:hover {
	outline: 17px solid #fff;
	z-index: 7
}
.projects-wrapper .filterBar {
	text-align: left !important;
}
.column-projects .project, .column-projects .project .background-image-holder {
	height: 150px;
	margin-bottom: 0px;
	left: 0px;
}
.column-projects .project .background-image-holder {
	transition: outline .2s ease-out;
}
.column-projects .project:hover .background-image-holder {
	outline: 10px solid #fff;
}
.row.projects-container.column-projects div {
/* margin: 0 !important;
	padding: 0 !important; */
	
}
/* We Speak */

#speak {
	background-color: rgba(87,67,95,1.00);
	color: #fff;
	border-top: 20px solid rgba(255,255,255, .025)
}
#speak .backgroundImage {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	width: 100%;
	opacity: .1;
	transform: scaleX(1) translate(20%, -20%);
	z-index: 0;
}
#speak:before {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;/* background-color: rgba(41,41,41,0.95); */
}
#speak h1 span {
	color: #e74c3c;
}
.speak {
	position: relative;
	box-sizing: border-box;
	display: inline-table;
	vertical-align: middle;
	text-align: center;
	height: auto;
	width: 33.1%;
	margin: 2px 0;
	padding: 0;
	background: rgba(0,0,0, 0);
	border: 0px solid rgba(255,255,255, .25);
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
}
.card {
	position: relative;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	height: auto;
	width: 100%;
	margin: 2px 0;
	padding: 0;
	background: rgba(0,0,0, 0);
	border: 0px solid rgba(255,255,255, .25);
	border-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
}

@media screen and (min-width: 768px) {
}
 @media screen and (min-width: 992px) {
 
}
 @media screen and (min-width: 1200px) {
}
/*

@media (min-width: 320px) {
	
	.card .content {
		height: auto;	
	}
	
	.card .content .cardTitle {
		width: 100%;
		border: 1px solid;	
	}
	
	.card .content .side {
		width: 100%;
		border: 1px solid;	
	}
	
}

*/


.speaks div.speak h3 {
	margin-bottom: .75em;
	margin-bottom: 0;
	text-transform: uppercase;
}
.speak a {
	color: #fff;
}
.speak:hover {
/* background: #fff; */	
}
.speak .item-inner, .speaks .content {
	position: relative;
	padding: 20px 50px 20px 30px;
	vertical-align: middle;
	display: inline-table;
	height: 150px;
	width: 100%;
	margin: 0;
	bottom: 0;
	left: 0;
	transform: translateY();
	text-align: left;
	background: rgba(0,0,0, .1);
	border: 0px solid;
	border-radius: 0px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
}
.speak .item-inner:before {
	display: inline-block;
	position: absolute;
	font-family: "FontAwesome";
	font-size: 20px;
	content: "\f077";
	top: -12px;
	right: -7px;
	transform: rotate(45deg);
	display: none;
}
#what .speak .item-inner:before {
	color: #fff;
}
.speak .date {
	font-family: "Museo Sans";
	font-weight: 700;
	display: table-cell;
	width: 20%;
	padding-left: 10%;
	vertical-align: middle;
	opacity: 1;
}
.speak .date .month {
	display: block;
	font-size: 17px;
	line-height: 1em;
	margin-bottom: 10px;
	color: #e74c3c;
	letter-spacing: 0em;
	text-transform: uppercase;
}
.speak .date .day {
	display: block;
	font-size: 50px;
	line-height: .5em;
	margin-bottom: 0;
	letter-spacing: -.07em;
}
.speak .date .year {
	display: block;
	font-size: 50px;
	line-height: 1em;
	letter-spacing: -.07em;
	color: rgba(231,76,60,1);
	display: none;
}
.speak .post-title {
	display: table-cell;
	width: 80%;
	vertical-align: middle;
	padding-right: 10%;
	/* transform: skewX(30deg); */
	border-right: 0px dashed rgba(255,255,255, .2);
}
.speak .post-title h3 {
/* transform: skewX(-30deg); */
}
.post-title p {
	font-size: 90%;
	line-height: 1.15em;
	margin-bottom: 0;
}
.speak h3 {
	position: relative;
	font-family: "Museo Sans";
	font-size: 15px;
	font-weight: 700;
	line-height: 1.15em;
	letter-spacing: 0em;/* text-transform: uppercase;	*/
}
.speak span.sub.alt-font {
	font-size: 12px;
	text-transform: uppercase;
}
.speak .image {
	position: absolute;
	display: block;
	height: 100px;
	width: 100%;
	bottom: 0;
	left: 0;
	background: #333;
}
.speak .post-meta {
	position: absolute;
	bottom: 20px;
	left: 30px;
}
.speak .link {
/* display: block;
	position: absolute;
	width: 100%;
	bottom: 0;
	right: 0;
	padding: 20px;
	background: #fff;
	text-align: left; */
}
.speak .link-text {
	display: none;
}
.blog-masonry-item {
	margin-bottom: 15px;
	margin: 0;
	padding: 15px;
}
.blog-masonry-item .post-title {
	background: rgba(0,0,0, 0);
	padding: 28px 32px 32px 32px;
	position: relative;
	border: 1px solid rgba(255,255,255, .2);
}
.blog-masonry-item h3 {
	font-family: "Oxygen";
	text-transform: uppercase;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: .05em;
}
.blog-masonry-item .post-meta {
/*display: table-cell;
	width: 25%;	
	vertical-align: top;
	border: 0px solid;
	border: 0px solid;*/
}
.blog-masonry-item h2 {
	font-size: 24px;
	line-height: 36px;
	margin-bottom: 16px;
}
.blog-masonry-item p {
	margin-bottom: 20px;
}
.blog-masonry-item span {
	display: block;
	color: #fff;
	line-height: 18px;
}
.blog-masonry-item .link-text {
	position: absolute;
	bottom: 32px;
	right: 32px;/*
  display: block;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  padding: 15px auto;
  box-sizing: content-box;
  background: #fff;
  */
}
.blog-masonry-item h1 {
	font-weight: 600;
	margin-bottom: 48px;
	line-height: 40px;
}
.blog-masonry-item iframe {
	width: 100%;
}
.quote-post, .quote-post .post-title, .quote-post h1, .quote-post span, .quote-post .link-text {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
}
.quote-post:hover {
	background: #e74c3c;
}
.quote-post:hover h1 {
	color: #fff;
}
.quote-post:hover span {
	color: #fff;
}
.quote-post:hover .link-text {
	color: #fff;
	border-color: #fff;
}
/* Testimonial */


#testimonial {
/*background-color: #e95a0c;
	background-color: #e74c3c;
	background-color: #fff !important;
	color: #3c3c3b !important;
	padding-top: 100px;
	padding-bottom: 100px;*/
}
#testimonial .quote {
	font-size: 1.15em !important;
	font-weight: 100;
	line-height: 1.25em;
	margin-bottom: 1em;
	color: #3c3c3b;
	color: #fff;
}
#testimonial span.name {
	font-weight: bold;
	font-weight: 700;
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid rgba(255,255,255, .7);
}
.testimonials {
	border-top: 0;
}
/* Contact Us */

#contact {
	background: #3c3c3b;
	background: #ddd;
	color: #3c3c3b;
	padding-bottom: 100px;
}
#contact .container {
}
#contact a {
	color: rgba(231,76,60,1.00);
	text-decoration: none;
	outline: none;
}

#contact h4 {
	color: #3c3c3b;
}

#contact a:hover, a:focus {
	color: rgba(231,76,60,.7);
}
#contact form {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dashed #3c3c3b;
}
/* Project */

#project {
	background-color: #ddd;
	color: #3c3c3b;
}

#project h4 {
    color: inherit;
}

#project .quote {
    font-size: 30px;
    line-height: 35px;
    font-weight: 300;
    margin-bottom: 15px;
}


/* Footer */



#footer, footer.details {
	background: none;
	margin: 0;
	padding: 0;
}
/* Modals */

.modal-dialog {
	/* top: !important; */
	height: auto;
	
	margin: 30px auto;
	transform: translateY(-50%);
}
.modal-header {
	border-bottom: none;
}

.modal-header span[class*=pe-7-] {
	position: absolute;
	top: 0;
	left: 0;	
}

.modal-content {
	position: relative;
	border-radius: 0;
	box-shadow: none;
	margin: 0 auto;
	padding: 0px 0px 130px 0px;
	background-color: rgba(255,255,255,.95);
}
.modal-content ul li {
	padding: 10px;
	border-bottom: 1px solid rgba(0,0,0, .1);
}
.modal-footer {
	position: absolute;
	display: block;
	width: 100%;
	min-height: 100px;
	padding: 30px !important;
	bottom: 0;
	left: 0;
	background: rgba(196,194,195,1.00);
	background: #fff;
}
.modal-header button.close {
	font-size: 40px;
	line-height: .5;
	margin: 0;
	padding: 0;
	color: #fff;
	color: rgba(255,255,255,.7);
	text-shadow: none;
	opacity: 100;
	transition: color .2s;
}
.modal-header button.close:hover {
	color: rgba(255,255,255,1);
	opacity: 100;
}
p.date {
	font-size: 12px;
	margin-bottom: 1em;
}
.modal-header {
	padding: 50px;
	color: #fff;
	height: 75px;
}
.modal-header {
	background: #e74c3c;
}
.modal-header .container-fluid {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.modal-body {
	margin: 50px 0;
}
.modal-body button.close {
	border: 4px solid;
}
.modal-footer {
	position: absolute;
	bottom: 0px !important;
}
.section-descr {
	font-family: "Museo Sans";
	font-size: 25px;
	line-height: 1.15em;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 1em;
}
.textImage {
	display: block;
	height: 200px;
	width: auto;
	margin-bottom: 2em;
}
/* Buttons */

button.button {
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: inline-block;
	padding: 0;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	line-height: 3;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	background: #e95a0c;
	color: #fff;
	padding: 0 1em 0 0;
	font-size: 100%;
	font-weight: bold;
	letter-spacing: 3px;
}
button.button:before {
	content: "\e001";
	color: #fff;
	float: left;
	padding: 0 0.7em;
	margin: 0 0.8em 0 0;
	background: #3c3c3b;
}

.workHeader {
	height: auto;
	background-color: #e74c3c;
    background-color: #000;
	color: #fff;
    padding: 150px 0 150px 0;
}

.projectTitle {
	position: relative;
	bottom: 0px;
	margin-bottom: 0;
}



.workHeader:after {
	display: block;
	position: absolute;
	top: 0;
	left: -100%;
	content: "";
	height: 400%;
	width: 400%;
	background: url(../img/anglePattern.png) 0 0 repeat;
	transform: skewX(-30deg); 
	opacity: .025;
	border: 0px solid;
	z-index: .5;		
}

.detailBar {
    background: #23292E;
    color: #fff;
    padding: 15px 0;
    font-size: .75em;
}

.detailBar img.detailLogo {
    display: inline-block;
    padding: 15px;
    margin-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, .4);
    max-height: 65px;
    align-self: center;
}

.detailTitle {
    display: inline-block;
    align-self: center;
}


#project {
	background: #fff;
	color: rgba(0,0,0, .7);	
}

#project img {
	border: 0px solid #3c3c3b;	
}

#project ul li {
    padding-left: 20px;
}

#project ul li:before {
    display: inline-block;
    width: 20px;
    margin-left: 0px;
    font-family: "FontAwesome";
    font-size: 16px;
    position: absolute;
    display: inline-block;
    
    content: "\f054";
    transform: translate(-100%, 5%);
}



section.projectScreens {
    background: #23292E;
}

.portfolioScreen {
	box-shadow: 0px 10px 20px rgba(0,0,0, 0);
    background: rgba(221,221,221,0.1);
	border: 20px solid #fff;
    z-index: 7;
}

.portfolioScreen .slick-arrow {
	position: absolute;
	top: 50%;
    text-indent: -9999em;
	border: 2px solid pink !important;
}

.portfolioScreen .slick-arrow:before {
	position: relative;
	display: block;
    top: 0;
	height: 100%;
	width: 100%;
	font-family: "FontAwesome";
	color: red;
    text-indent: 0;
}

.portfolioScreen .slick-next {
	right: -75px;	
}

.portfolioScreen .slick-next:before {
	content: "\f053";
	top: 40px !important;
	right: 0px;
}

.portfolioScreen .slick-arrow:before.slick-previous {
	content: "\f053";
}

#project .button {
	background: red;	
}

/* Video */

#video {
	padding: 0;
}
.video-section .pattern-overlay {
	background-color: rgba(71, 71, 71, 0.59);
	padding: 110px 0 32px;
	min-height: 496px;/* Incase of overlay problems just increase the min-height*/
}
 @media (min-width: 320px) {
 .mainLogo {
 margin-left: 0px;
}
 .navbar-fixed-top .mainLogo {
 margin-left: 0px;
}
h1 {
 font-size: 50px;
 line-height: .85em;
}
 h3 {
 font-size: 18px;
}
 section {
 padding-top: 50px;
 padding-bottom: 50px;
}
 #testimonial .quote {
 font-family: "museo_sans700";
 font-size: 1em;
 line-height: 1.25em;
 margin-bottom: 1em;
}
}

@media (min-width: 992px) {

h1 {
 font-size: 65px;
 line-height: .8em;
}

.navbar-default {
 min-height: 100px;
 padding-top: 0px;
 background: rgba(255,255,255,0);
 background: rgba(0,0,0, .25);
 transition: all;
 transition-duration: .5s;
}

.navbar-fixed-top, .navbar-fixed-bottom {
    position: relative;
    right: 0;
    left: 0;
    z-index: 1030;
}


.mainLogo {
 margin-left: -45px;
 transition: transform, margin;
 transition-duration: .2s;
 transform-origin: 50% 50%;
}


}

 @media screen and (min-width: 1200px) {
 h1 {
 font-size : 90px;
 line-height : .8em;
 letter-spacing : -.05em;
 margin-bottom: 25px;
}
 h3 {
 font-size: 25px;
}
 .mainLogo {
 margin-left: -45px;
 transition: transform, margin;
 transition-duration: .2s;
 transform-origin: 50% 50%;
}
.navbar-default.navbar-fixed-top {
 padding-top: 0px;
 min-height: 50px;
 background: rgba(255,255,255,1);
}
 .navbar-fixed-top .mainLogo {
 margin-left: -65px;
}
.navbar-default {
 min-height: 125px;
 padding-top: 25px;
 background: rgba(255,255,255,0);
 background: rgba(0,0,0, .25);
 transition: all;
 transition-duration: .5s;
}

 .portfolio-nav.slick-slider {
	border: 4px solid;
 }
 
 .portfolio-nav .slick-arrow {
	position: absolute;	 
	top: 0;
	right: 0;
 }
 
 .portfolio-container [class^=col-] {
	 position: relative;
	 height: 200px;
	 padding: 0;
	 transition: all .2s ease;
	 border: 1px solid rgba(255,255,255, 0);
	 cursor: pointer;
 }
 
 .portfolio-container [class^=col-]:before {
	position: absolute;
	display: block;
	content: "";
	height: 100%;
	width: 100%;
	transition: transform .2s ease;
	transform-origin: center;
	background-color: rgba(0,0,0, .4);	 
 }
 
 .portfolio-container [class^=col-]:hover:before{
	transform: scaleY(0);
 }
 
 .portfolio-container [class^=col-]:after {
    position: absolute;
    display: block;
    height: 25px;
    width: 25px;
    font-family: "FontAwesome";
    font-size: 16px;
    content: "\f078";
    color: rgba(231,76,60,1.00);
    bottom: 30px;
    right: 10px;
	transition: all .2s ease;
    transform: rotate(-45deg);
}


.portfolio-container [class^=col-]:hover {
	border: 7px solid rgba(255,255,255, .7);
	z-index: 9999999;
}


.portfolio-container [class^=col-]:hover:after {
   
    height: 50px;
    width: 50px;
    font-family: "FontAwesome";
    font-size: 32px;
    content: "\f078";
    color: rgba(231,76,60,1.00);
    bottom: 50px;
    right: 10px;
    transform: rotate(-135deg);
}

#project {
	/*
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 400px;
	width: 100%;	
	background: none;
	background-color: transparent;
	border: 4px solid;
	*/
}
 
 .portfolio-container [class^=col-] .title {
	position: absolute;
	display: inline-block;
	text-align: left;
	width: 50%;
	bottom: 30px;
	left: 30px;
	transition: all .2s ease;
	/* transform: translateY(-50%); */
 }
 
 .portfolio-container [class^=col-]:hover .title {
	  bottom: 30px;
	  opacity: .05;
 }
 
.portfolio-container [class^=col-] .title h3 {
	font-size: 20px;
	line-height: 1.15em;
	margin-bottom: 0;	
}

.modal-full {
	width: 100%;
	box-sizing: border-box;	
}

 section {
 position: relative;
 padding-top: 75px;
 padding-bottom: 90px;
}
 section.overlay2:before {
 position: absolute;
 display: block;
 content: "";
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 color: rgba(35,41,46, 1) !important;
 background: rgba(0,0,0, .7);
}
section.parallax {
 padding: 100px 0;
 background: #23292E;
 color: #fff;
 color: rgba(255,255,255, 1) !important;
}

section.parallax p {
	font-size: 1.6rem;
	line-height: 1.4;
	font-weight: 700;	
}

section.parallax p {
	max-width: 520px;	
}

 section.parallax:after {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 content: "";
 height: 200%;
 width: 200%;
 background: url(../img/anglePattern.png) 0 0 repeat;
 transform: skewX(30deg);
 opacity: .05;
 border: 0px solid;
}
 .parallax-window {
 min-height: 400px;
 background: transparent !important;
}
 .parallaxImage {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 filter: grayscale(100%);
 opacity: .7
}
 section.parallax h3 {
 margin-bottom: 0;
}
 .billboardNav {
 width: 1140px;
 margin: 0 auto;
}
 #testimonial {
 background-color: #e74c3c;
 background-color: #23292E;
 color: #fff;
 padding-top: 100px;
 padding-bottom: 100px;
}
 .testimonial .quote {
 font-family: "museo_sans700";
 font-size: 2em;
 line-height: 1.25em;
 margin-bottom: 1em;
 color: #fff;
}
 .testimonial span.name {
 font-weight: bold;
 font-weight: 700;
 margin-right: 20px;
 padding-right: 20px;
 border-right: 1px solid rgba(255,255,255, .7);
}
 .testimonial .backgroundShape.left {
 background-color: rgba(0,0,0, .1);
 transform: skewX(15deg) translate(-780px, -20%);
 z-index: .5;
}
 .testimonial .backgroundShape.right {
 background-color: #23292E;
 transform: skewX(15deg) translate(850px, -20%);
 z-index: .5;
}
 .testimonials {
 border-top: 0;
}
 .promo {
 height: 575px;
 background: #333;
}
}