@basecolor: #221e1f;
@baselink: #00a7da;
@secondarycolor: #818285;
@baseheader: 36px;
@mbaseheader: 66px;
@lbaseheader: 94px;

/* FONTS */
body {font-family: 'Source Sans Pro', sans-serif;}
strong, h1, h2, h3, h4, h5, h6, .btn-more, .menu_toggle, #main-nav, .sf-text, .wprev, .wnext {font-family: 'Source Sans Pro', sans-serif; font-weight:700;}
.title, .f-ssl {font-family: 'Source Sans Pro', sans-serif; font-weight:300;}

/* GENERAL */
html {}
body {padding-top:@baseheader; font-size:11px; line-height:1.5em; color: @basecolor;}
h1 {font-size:12px;}
h1.heading {text-transform:uppercase; margin:0 0 10px 0;}
h2.title {font-size:21px; margin:0 0 10px 0;}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     -webkit-border-radius:0;
}

a {color:@baselink;}
a.btn-more {color: @basecolor;}
a.btn-more:hover {color:@baselink;}

/* HEADER */
.navbar {min-height:@baseheader; border-bottom:none; background:#fff; z-index:20;}
.navbar.fix {
	-webkit-box-shadow:0 3px 8px rgba(0,0,0,0.1); -webkit-box-shadow:0 3px 8px rgba(0,0,0,0.1); box-shadow:0 3px 8px rgba(0,0,0,0.1);
}
.navbar .container {min-height:@baseheader;}
.logo {display:block; height:@baseheader; width:100%; text-indent:-9999px; position:relative; z-index:1;
	background-image:url(../images/vibrand-logo.png);
	background-repeat:no-repeat;
	background-position:left center;
	background-size:auto 50%;
}
.logo img {height:100%; display:block;}
.menu_toggle {display:block; height:@baseheader; position:absolute; top:0; right:0; text-align:right; width:100%; z-index:2; text-transform:uppercase; font-size:14px; color:@secondarycolor;}
.menu_toggle:hover, .menu_toggle.opened {color:@baselink; text-decoration:none;
	background-image:url(../images/vibrand-logo-white.png);
	background-color:@baselink;
	background-repeat:no-repeat;
	background-position:15px center;
	background-size:auto 50%;
}
.menu_toggle:focus {color:@baselink; text-decoration:none;}
.menu_toggle span {display:block; height:100%; line-height:@baseheader; padding-right:25px;
	background-image:url(../images/icon/menu-down.png);
	background-repeat:no-repeat;
	background-position:right center;
	background-size:auto 6px;
}
.menu_toggle.opened span, .menu_toggle.opened:hover span {background-image:url(../images/icon/menu-up-white.png);}
.menu_toggle:hover span {background-image:url(../images/icon/menu-down-white.png);}

#main-nav {position:fixed; right:0; top:@baseheader; width:100%; height:100%; background:@baselink; z-index:21; display:none;}
#main-nav a {display:block; font-size:24px; text-transform:uppercase; line-height:30px; padding:0 15px; color:#fff;}
#main-nav a:hover {color:#111; text-decoration:none;}
#main-nav a.active { background:#000; color:#fff;}

.nav-mask {position:fixed; width:100%; height:100%; z-index:9; opacity:0; display:none;}

/* MAIN SLIDER */
#main-slider {height:145px; background:#000;}
.flexslider {position:relative;}
.flexslider .slides {padding:0; margin:0; list-style:none;}
.flexslider .slides li {width:100%; height:145px; float:left; position:relative;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center top;
}
.flexslider .slides li a {display:block; position:absolute; width:100%; height:100%;}

.flex-control-nav {position:absolute; bottom:0; left:0; width:100%; text-align:center; padding:0; margin:0;}
.flex-control-nav li {display:inline-block; list-style:none; margin:0 4px;}
.flex-control-nav li a {display:block; width:4px; height:4px; background:#fff; text-indent:-9999px; cursor:pointer; opacity:0.5;
	-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
}
.flex-control-nav li a.flex-active {opacity:1;}

.flex-direction-nav {position:absolute; top:0; left:0; width:100%; padding:0; margin:0; list-style:none;}
.flex-direction-nav li {background:#000; position:relative;}
.flex-direction-nav li a {text-indent:-9999px; width:34px; height:34px; display:block; position:absolute; top:55px;}
.flex-prev {left:0; background:url(../images/slider/slide-prev.png) no-repeat center center; background-size:auto 7px;}
.flex-next {right:0; background:url(../images/slider/slide-next.png) no-repeat center center; background-size:auto 7px;}

/* HOMEPAGE */
#home-profile {padding:15px 0;}

#home-works {text-align:right; margin-bottom:20px;}
#home-works .row {margin:0; margin-bottom:10px;}
.hw-child {background:#000; position:relative; padding:0; overflow:hidden;}
.hw-child:before {
	content:"";
	display:block;
	padding-top:74%;
}
.hw-child:nth-child(even) {background:#ccc;}
.hw-child img {position:absolute; width:100%; margin:auto; top:0; right:0; bottom:0; left:0;}

#home-clients {}
#home-clients .row {padding:30px 0;}
#home-clients .row > div {margin-bottom:20px;}
#home-clients .logo-wrap {width:100%; position:relative;}
#home-clients .logo-wrap:before {
	content:"";
	display:block;
	padding-top:41%;
}
#home-clients .logo-wrap img {position:absolute; display:block; max-width:70%; max-height:70%; margin:auto; top:0; right:0; bottom:0; left:0;}

/* FOOTER */
.fc-wrap {float:none; margin:0 auto;}
#footer {background:#818285; color:#fff; font-size:10px; line-height:1.28em;}
#footer > .container > .row {padding:45px 0;}
.footer-child {position:relative;}

.footer-logo img {display:block; width:80%; max-width:104px;}
.footer-soc {list-style:none; font-size:14px; padding:0; margin:0;}
.footer-soc li {margin-top:8px;}
.footer-soc a {color:#fff;}
.footer-soc a:hover {color:@baselink;}

.fcr1 {padding-top:20px;}
.fcr2 {padding-top:10px;}

.footer-wrap {padding:25px 0;}
.ft-top {margin-bottom:25px;}
.ft-top img {display:block; width:58px;}
.ft-bottom {position:relative;}
.soc-link {padding:0; margin:0; list-style:none; position:absolute; bottom:0; right:0;}
.soc-link li {float:left; margin-left:6px;}
.soc-link li a {display:block; width:15px; height:15px; text-indent:-9999px;
	background-size: auto 12px;
	background-repeat:no-repeat;
	background-position:center center;
}
.soc-link li a.soc-fb {background-image:url(../images/icon/icon-fb1.png);}
.soc-link li a.soc-twitter {background-image:url(../images/icon/icon-twitter1.png);}
.soc-link li a.soc-vimeo {background-image:url(../images/icon/icon-vimeo1.png);}
.soc-link li a.soc-instagram {background-image:url(../images/icon/icon-instagram1.png);}
.soc-link li a.soc-fb:hover {background-image:url(../images/icon/icon-fb2.png);}
.soc-link li a.soc-twitter:hover {background-image:url(../images/icon/icon-twitter2.png);}
.soc-link li a.soc-vimeo:hover {background-image:url(../images/icon/icon-vimeo2.png);}
.soc-link li a.soc-instagram:hover {background-image:url(../images/icon/icon-instagram2.png);}

/* WHO WE ARE */
.standard-pads {padding:30px 0 20px;}
.full-image {}
.full-image img {display:block; width:100%;}

/* WHAT WE DO */
.wwd-child {}
.wwd-child h3 {margin:0; font-size:11px; color:@baselink;}
.bold-link {text-transform:uppercase; color:@basecolor; display:block; line-height:60px;}
.bold-link:hover {color:@baselink;}
.fw-image {margin:20px 0 0;}
.fw-image img {display:block; width:100%;}

/* ABOUT */
	.about-images {padding-bottom:30px;}

/* CONTACT */
/* Flexible iFrame */

.flexible-map {
    position: relative;
    padding-bottom: 150px;
    height: 0;
    overflow: hidden;
}

.flexible-map iframe,   
.flexible-map object,  
.flexible-map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
}

.contact-form {padding-bottom:30px;}
.contact-form table {width:100%;}
.contact-form table td {font-size:10px; color:@baselink; vertical-align:top; line-height:20px;}
.contact-form table td.td1 {width:22%;}
.contact-form table td.td2 {width:5%; text-align:center;}
.contact-form table td.td3 {width:73%;}
.contact-form table td.td3 input, .contact-form table td.td3 textarea {width:90%; padding:0 5%; border:none; background:#e7e8e8; color:#444; margin-bottom:5px; height:20px;}
.contact-form table td.td3 textarea {resize:none; height:45px; line-height:1.2em; padding:5px 5%;}
.contact-form table td.td3 input.input-s {width:30%; background:#ccc; margin-right:3px;}
.contact-form table td.td3 input.submit-btn {width:30%; background:@baselink; color:#fff;} 
.contact-form table td.td3 input.submit-btn:hover {background:#444;}

/* SHOWCASE */
.showcase-intro {padding-bottom:0;}
#work-category .container {padding-top:10px; padding-bottom:10px; position:relative;}
.work-sticky.stuck {position:fixed; top:37px; left:0; width:100%; z-index:20; background:#fff;}
#owl-cat {}
#owl-cat a {display:block; text-align:center; background:@basecolor; color:#fff; font-size:10px; line-height:22px; margin:0 1px 0 0;}
#owl-cat a:hover, #owl-cat a.active {background:@baselink; text-decoration:none;}
#owl-cat .owl-controls {position:absolute; left:0; top:0; margin:0; width:100%;}
#owl-cat .owl-controls .owl-prev {margin:0; position:absolute; left:0; top:0; width:14px; height:22px; text-indent:-9999px; background:url(../images/icon/arrow-left.png) no-repeat center center; background-size:auto 6px;}
#owl-cat .owl-controls .owl-next {margin:0; position:absolute; right:0; top:0; width:14px; height:22px; text-indent:-9999px; background:url(../images/icon/arrow-right.png) no-repeat center center; background-size:auto 6px;}

.showcase-front {}
.showcase-front .btn-more {line-height:42px; text-align:right; display:block;}
.moreplus {height:42px;}
.sf-child {position:relative;}
.sf-child img {display:block; width:100%; position:relative; z-index:1;}
.sf-child a {display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:3; text-indent:-9999px;}
.sf-text {position:absolute; width:90%; margin:auto; max-width:1300px; top:0; left:0; bottom:0; right:0; height:100%; z-index:2; color:#fff; text-transform:uppercase; line-height:1em; font-size:21px;}
.sf-text span {position:absolute; left:0; bottom:15px;}
.sf-child:hover .sf-text {color:#111;}

.showcase-detail {overflow:hidden; padding:30px 0 0;}
.detail-container {overflow:hidden; padding:0; margin-bottom:0;}
.detail-container li {list-style:none; width:100%; margin:0; padding:0;}
.detail-container img {display:block; width:100%;}
.wcontainer {overflow:hidden;}
.wnext, .wprev {float:right; display:block; width:90px; height:60px; line-height:56px; text-transform:lowercase; color:@basecolor;}
.wnext {background:url(../images/icon/lnext-1.png) no-repeat right center; background-size:auto 9px; text-align:right; padding-right:15px;}
.wnext:hover {background:url(../images/icon/lnext-2.png) no-repeat right center; background-size:auto 9px; color:@baselink; text-decoration:none;}
.wprev {background:url(../images/icon/lprev-1.png) no-repeat left center; background-size:auto 9px; padding-left:15px; float:left;}
.wprev:hover {background:url(../images/icon/lprev-2.png) no-repeat left center; background-size:auto 9px; color:@baselink; text-decoration:none;}

.video-container {
	position: relative;
	overflow:hidden; height:200px; width:100%;
	background:#000;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media(min-width:321px){
	
}

@media(min-width:640px){
	body {padding-top:@mbaseheader; font-size:14px;}
	h1 {font-size:16px;}
	h2.title {font-size:36px;}
	
	/* HEADER */
	.navbar {min-height:@mbaseheader;}
	.navbar .container {min-height:@mbaseheader;}
	.logo {height:@mbaseheader; background-size:auto 38%;}
	.menu_toggle {height:@mbaseheader; width:50%; font-size:21px;}
	.menu_toggle span {line-height:@mbaseheader; }
	.menu_toggle:hover, .menu_toggle.opened {background-image:none; color:#fff;}
	#main-nav {width:50%; top:@mbaseheader;}
	#main-nav a {text-align:right; font-size:36px; line-height:	42px;}
	
	/* MAIN SLIDER */
	#main-slider, .flexslider .slides li {height:325px;}
	.flex-control-nav li {margin:0 7px;}
	.flex-control-nav li a {width:6px; height:6px;}
	.flex-direction-nav li a {width:70px; height:70px; top:128px;}
	.flex-prev, .flex-next {background-size:auto 12px;}
	
	/* INDEX */
	#home-profile {padding-top:30px; padding-bottom:20px;}
	
	/* FOOTER */
	#footer {font-size:12px;}
	.fc-wrap {float:left; margin:0;}
	.fcr1, .fcr2 {padding:0;}
	.footer-child {height:100px;}
	.fc-logo {height:200px;}
	.footer-logo {position:absolute; left:0; bottom:0;}
	
	.ft-top img {width:98px;}
	.soc-link {left:auto; right:0;}
	.soc-link li {margin-left:10px;}
	.soc-link li a {background-size:auto 15px; width:17px; height:17px;}
	
	/* WHAT WE DO */
	.wwd-child h3 {font-size:14px;}
	
	/* CONTACT */
	.flexible-map {padding-bottom:325px;}
	.flexible-map iframe,   
	.flexible-map object,  
	.flexible-map embed {height:325px;}
	
	.contact-wrap {overflow:hidden;}
	.cw-right {float:right; width:32%;}
	.cw-left {float:left; width:58%;}
	.contact-form table td {font-size:14px; line-height:26px;}
	.contact-form table td.td3 input {height:26px;}
	.contact-form table td.td3 textarea {height:80px;}
	
	/* SHOWCASE */
	#work-category .container {padding-top:20px; padding-bottom:20px;}
	.work-sticky.stuck {top:67px;}
	.sf-text {font-size:50px;}
	.sf-text span {bottom:25px;}
	.showcase-front .btn-more {line-height:50px;}
	.moreplus {height:50px;}
	
	.detail-container li {float:left; width:50%; list-style:none;}
	.detail-container img {display:block; width:100%;}
	
	.wprev {float:right;}
	
	.video-container {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px; overflow:hidden; height:0;
	}
	 
	.video-container iframe,
	.video-container object,
	.video-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
}

@media(min-width:768px){
	.menu_toggle span {width:360px; background-position:352px center; padding-right:13px;}
	#main-nav a {text-align:left;}
	#main-nav a span {display:inline-block; width:345px; text-align:right;}
	
	/* WHAT WE DO */
	.wwd-child h3 {font-size:18px;}
	
	/* SHOWCASE */
	#owl-cat a {font-size:12px; line-height:26px;}
	#owl-cat .owl-controls .owl-prev, #owl-cat .owl-controls .owl-next {height:26px; width:20px; background-size:auto 8px;}
}

@media(min-width:992px){
	body {font-size:18px;}
	h1 {font-size:24px;}
	h2.title {font-size:48px;}
	
	/* HEADER */
	.menu_toggle span {width:470px; background-position:462px center;}
	#main-nav a {text-align:left;}
	#main-nav a span {display:inline-block; width:458px; text-align:right;}
	
	#main-slider, .flexslider .slides li {height:460px;}
	.flex-control-nav li {margin:0 10px;}
	.flex-control-nav li a {width:10px; height:10px;}
	.flex-direction-nav li a {width:100px; height:100px; top:180px;}
	.flex-prev, .flex-next {background-size:auto 17px;}
	
	/* FOOTER */
	#footer {font-size:14px;}
	.footer-address {position:absolute; bottom:0; left:0;}
	.footer-soc {position:absolute; bottom:0; left:0; font-size:18px;}
	.footer-child {height:124px;}
	.fc-logo {height:124px;}
	
	.footer-wrap {padding:35px 0;}
	.ft-top img {width:102px;}
	.soc-link {}
	.soc-link li {margin-left:13px;}
	.soc-link li a {background-size:auto 17px; width:20px; height:20px;}
	
	/* CONTACT */
	.flexible-map {padding-bottom:460px;}
	.flexible-map iframe,   
	.flexible-map object,  
	.flexible-map embed {height:460px;}
	.contact-form table td {font-size:18px; line-height:32px;}
	.contact-form table td.td3 input {height:32px;}
	.contact-form table td.td3 textarea {height:120px;}
	
	/* SHOWCASE */
	.work-sticky.stuck {top:95px;}
	#owl-cat a {font-size:14px; line-height:30px;}
	.showcase-front .btn-more {line-height:80px;}
	.moreplus {height:80px;}
	.sf-text {font-size:72px;}
	.sf-text span {bottom:45px;}
	#owl-cat .owl-controls .owl-prev, #owl-cat .owl-controls .owl-next {height:30px; width:36px; background-size:auto 10px;}
}

@media(min-width:1200px){
	.menu_toggle span {width:570px; background-position:562px center;}
	#main-nav a {text-align:left;}
	#main-nav a span {display:inline-block; width:557px; text-align:right;}
}

@media(min-width:1601px){
	.container,
	.navbar-static-top .container,
	.navbar-fixed-top .container,
	.navbar-fixed-bottom .container {
		width: 1530px;
	}
	.span12 {
		width: 1530px;
	}
  
  	body {font-size:21px;}
	h1 {font-size:30px;}
	h2.title {font-size:54px;}
	
	.menu_toggle span {width:750px; background-position:742px center;}
	#main-nav a span {width:740px;}
	
	#main-slider, .flexslider .slides li {height:576px;}
	.flex-direction-nav li a {top:238px;}
	/* CONTACT */
	.flexible-map {padding-bottom:500px;}
	.flexible-map iframe,   
	.flexible-map object,  
	.flexible-map embed {height:500px;}
	
	/* SHOWCASE */
	.sf-text {font-size:90px;}
	.sf-text span {bottom:65px;}
}