/*
* Mobileforce Mobile stylesheet
* written by Amri Hidayatulloh
* amri.hidayatulloh@mobileforce.mobi
*/

/* ----------------------------- 320px till 479px --------------------------------- */


.mobile-menu {
	position: fixed;
	z-index: 100000;
	background: #272727;
	top : 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
}
.mobile-menu .common-wrapper {
	width: 94%;
	padding: 3%;
}
button.close {
	color: #fff;
	background: none;
	border :none;
}
.mobile-menu .menuarea {
	margin: 0;
	padding: 0;
	margin-bottom: 25px;
}
.mobile-menu .menuarea .caption {
	color: rgba(255,255,255,0.8);
	font-family: "DIN";
	font-size: 22px;
}
.mobile-menu .menuarea:hover .caption {
	color: #fff;
}
.mobile-menu .menuarea .line {
	width: 30px;
	height: 5px;
	background: #272727;
	margin-left: 5px;
}
.mobile-menu .menuarea.active .caption {
	color: #fff;
	font-family: "DIN Bold";
}
.mobile-menu .menuarea.active .line {
	background: rgb(255,217,22);	
}
.mobile-menu .separator {
	width: 100%;
	padding: 0;
	margin: 15px 0 10px 0;
	height: 3px;
	background: rgb(255,217,22); 
}
.mobile-menu button.social {
	color: #fff;
	background: none;
	border : none;
	font-size: 25px;
	margin: 0 4px;
}
.plus-corner.ctr::before {
    content: "+";
    color: rgb(255,217,22);
    font-weight: bolder;
    position: absolute;
    top: -38px;
    left: 46%;
    font-size: 42px;
}
.plus-corner.ctr.white::before {
    content: "+";
    color: #fff;
    font-weight: bolder;
    position: absolute;
    top: -38px;
    left: 46%;
    font-size: 42px;
}
.plus-corner.ctr.white {
	color: #333;
	font-size: 28px;
	line-height: 130%;
}

@media(min-width: 320px) and (max-width: 479px) {
	.desktop-view {
		display: none !important;
	}
	.mobile-view {
		display: inline-block !important;
	}
	button.start-project {
		display: none;
	}
	.mainmenu-fixed .navbar-container .navbar-wrapper .brand {
    	width: 60%;
	}
	.mainmenu-fixed .navbar-container .navbar-wrapper .social {
    	width: 38%;
	}
	.content-wrapper .header-wrapper .navbar-top .navbar-container .brand {
    	width: 60%;
	}
	.content-wrapper .header-wrapper .navbar-top .navbar-container .social {
 	   width: 38%;
	}
	.content-wrapper .header-wrapper.home-mobile {
	    padding: 0px;
	    margin: 0px 0px -5px;
	    position: relative;
	    display: inline-block;
	    height: 773px;
	    overflow: hidden;
	}
	.content-wrapper .header-wrapper .banner-wrapper {
		margin: 0;
		padding: 0;
		top : -20px;
		left: 0;
		z-index: 1;
		position: absolute;
		width: 100%;
		height: 859px;
	}
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 100px;
	    left: 5%;
	    width: 90%;
	    height: 150px;
	    text-align: center;
	}
	.content-wrapper .header-wrapper.home-mobile .gallery-wrapper {
	    position: absolute;
	    z-index: 10;
	    top: 655px;
	    left: -25%;
	    width: 150%;
	    height: 150px;	
	    overflow: hidden;
	}
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container .label {
		font-size: 32px;
		line-height: 150%;
	}	
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container .label button {
		margin-top: 10px;
	}	
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper img {
	    top: 0px;
	    left: -15%;
	    width: 130%;
	    position: absolute;
	    z-index: 1;
	}	
	.content-wrapper .header-wrapper.home-mobile .white-wrapper {
	    top: 330px;
	    left: 0px;
	    width: 100%;
	    height: 230px;
	    background-color: #FFF;
	    z-index: 3;
	    position: absolute;
	    padding: 0px;
	    margin: 0px;
	}	
	.content-wrapper .body-wrapper .media .heading-title {
	    font-family: "DIN Bold";
	    color: #272727;
	    font-size: 18px;
	    margin-bottom: 20px;
	    margin-top: 20px;
	}	
	.content-wrapper .footer-wrapper.mobile-view {
	    width: 100%;
	    padding: 0;
	    position: relative;
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader {
	    width: 100%;
	    left: 0;
	    top : 0;
	    padding: 10px 0;
	    height: 200px;
	    position: relative;
	    background: transparent url("../images/1200/footer2.jpg") no-repeat scroll top center / 100% auto;
	}	
	.content-wrapper .footer-wrapper.mobile-view .redarea {
	    width: 100%;
	    height: 132px;
	    position: relative;
	    background: #9E3230 url("../images/1200/footer1.jpg") no-repeat scroll center center / 200% auto;
	}
	.content-wrapper .footer-wrapper {
	    height: 352px;
	    background: #9E3230 url("../images/1200/footer1.jpg") no-repeat scroll center center / 100% auto;
	    width: 90%;
	    padding: 5%;
	    position: relative;
	}	
	.content-wrapper .footer-wrapper.mobile-view .darthvader fieldset.career {
		border-top: solid 2px #E24745;
		border-right: none;
		border-left : none;
		border-bottom : none;
		font-family: "DIN Medium";
		color: #E24745;
		font-size: 22px;	
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader fieldset.career legend {
		padding: 5px;
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader .desc {
		width: 90%;
		padding: 0 5%;
		font-family: "DIN";
		color: #fff;
		font-size: 12px;
		line-height: 140%;
	}
	button.common-transparent.footer-red {
	    border: 2px double #D04543;
	    color: #D04543;
	    opacity: 0.7;
	    font-size: 14px;
	    width: 100%;
	    height: 40px;
	    margin-top: 20px;
	}
	.content-wrapper .footer-wrapper.mobile-view .redarea .biggertext {
		width: 90%;
		padding: 5%;
		font-family: "DIN bold";
		color: #fff;
		font-size: 18px;
		line-height: 140%;	
	}
	.content-wrapper .footer-wrapper.mobile-view .redarea .copy {
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		font-size: 10px;
		color: #fff;
		font-family: "DIN";
		color: #fff;
		background: #272727;
		padding: 10px 20px;
	}
	.swiper-slide {
		border : double 1px transparent;
		overflow: hidden;
		width: 150px;
		height: 96px;
		position: relative;
	}
	.swiper-slide img.slide-img {
		width: 100%;
	}
	.swiper-slide img.main {
		width: 120%;
		position: absolute;
		top : -10%;
		left: -10%;
		z-index: 1;
	}
	.swiper-slide .label-container {
		position: absolute;
		z-index: 2;
		background: rgba(255,217,22,0.8);
		top : 150px;
		left: 0;
		width: 100%;
		height: 150px;
		transition : all 0.5s;
		-webkit-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-o-transition : all 0.5s;
		-moz-transition : all 0.5s;	
	}
	.swiper-slide.highlight .label-container {
		top : 0;
	}
	.swiper-slide .label-container .label {
		width: 95%;
		position: absolute;
		z-index: 1;
		color: #fff;
		left: 5%;
		top : 15px;
		line-height: 70%;
	}
	.swiper-slide .label-container .label .title {
		font-family: "DIN Bold";
		font-size: 12px;
		text-transform: uppercase;
	}
	.swiper-slide .label-container .label .type {
		font-family: "DIN";
		font-size: 10px;
	}
	.swiper-slide .label-container .label .client {
		font-family: "DIN";
		font-size: 11px;
		text-transform: uppercase;
	}
	.swiper-slide .label-container .label hr.white-separator {
		border: none;
		height: 1px;
		background: #fff;
	}
	.swiper-slide .label-container .client-icon {
		width : 30px;
		right: 10px;
		bottom : 10px;
		position: absolute;
	}
	.services-wrapper {
		text-align: center;
	}
	.header-wrapper.aboutpage {
		height:273px;
	}	
	.header-wrapper.aboutpage img {
		width: 300%;
	}
	.content-wrapper .header-wrapper.aboutpage {
		height: 400px;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper img {
		top: 0;
		left: -308px;
		width: 302%;
		position: absolute;
		z-index: 1;
	}	
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container{
	    width: 90%;
	    top : 100px;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container .label {
	    font-size: 23px;
	    color: #FFF;
	    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	    font-family: "DIN";
	    line-height: 80%;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container .label .sublabel {
	    font-size: 14px;
	}
	.header-wrapper.aboutpage .white-wrapper {
	    top: 250px;
	    min-height: 250px;
	}
	.header-wrapper.aboutpage .white-wrapper .text-container {
		font-size: 11px;
	}
	.content-wrapper .body-wrapper .media .description {
	    font-family: "DIN";
	    color: #888;
	    font-size: 12px;
	    line-height: 140%;
	    margin-bottom: 30px;
	}
	.content-wrapper .clients {
	    width: 100%;
	    background: #272727;
	}
	.content-wrapper .footer-wrapper.about {
	    height: 300px;
	    background: #9E3230 url("../images/1200/footer3.jpg") no-repeat scroll center center / 204% auto;
	    width: 90%;
	    padding: 5%;
	    position: relative;
	}
	.content-wrapper .footer-wrapper.about .text-area {
	    width: 90%;
	    left: 5%;
	    top: 20px;
	    position: absolute;
	    z-index: 2;
	    display: inline-block;
	    line-height: 60%;
	    height: 290px;
	}	
	.content-wrapper .footer-wrapper .text-area .small {
	    font-family: "DIN";
	    color: #FFF;
	    font-size: 13px;
	    line-height: 150%;
	}
	.content-wrapper .footer-wrapper .text-area .bigger {
	    font-family: "DIN Bold";
	    color: #FFF;
	    font-size: 23px;
	    line-height: 150%;
	}
	.content-wrapper .contact-wrapper {
		width: 100%;
		height: 800px;
		position: relative;
		margin: 0;
		padding: 0;
	}
	.content-wrapper .contact-wrapper .maps {
		position: relative;
		width: 100%;
		height: 400px;
		position: relative;
		background: #fff;
	}
	.content-wrapper .contact-wrapper .boxwhite {
		position: relative;
		background: #fff;
		width: 100%;
		top : 10px;
		left: 0;
		box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	}
	.content-wrapper .header-wrapper.aboutpage.careerpage {
			height: 257px;
	}
	.content-wrapper .career-container .item {
	    width: 100%;
	    height: 249px;
	    margin: -2px;
	    overflow: hidden;
	    position: relative;
	}
	.content-wrapper .career-container .item .text-container {
	    width: 100%;
	    position: absolute;
	    z-index: 3;
	    top: 27px;
	    left: 0px;
	}
	.header-wrapper.careerpage {
	    height: 270px;
	}
	.content-wrapper .header-wrapper .banner-wrapper img {
	    top: 22px;
	    left: -188px;
	    width: 210%;
	    position: absolute;
	    z-index: 1;
	}
	.content-wrapper .header-wrapper .banner-wrapper .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 91px;
	    height: 300px;
	}
	.content-wrapper .header-wrapper .banner-wrapper .text-container img.icon {
	    width: 130px;
	    position: relative;
	    display: inline-block;
	    left: 0;
	}
	.content-wrapper .career-wrapper {
	    width: 90%;
	    padding: 3% 5%;
	    background: #fff;
	}
	.content-wrapper .career-wrapper.full {
	    width: 100%;
	    padding: 0;
	    background: #FFF none repeat scroll 0% 0%;
	}
	.content-wrapper .career-wrapper.full .content {
		width: 90%;
		padding: 5%;
	}
	.content-wrapper .career-wrapper.full .apply {
	    height: 230px;
	    background: transparent url("../images/1200/footer2.jpg") no-repeat scroll center top / 100% auto;
	    overflow: hidden;
	    padding: 20px 0px;
	    width: 100%;
	}
	.gridwork-container .workbox {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 150px;
		overflow: hidden;
		position: relative;
		margin-left: 0px;
	}	
	.gridwork-container .workbox.full {
		width: 100%;
		margin-left: 0;
		height: 659px;
	}
	.gridwork-container .workbox img.main {
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    width: 100%;
	}
	.gridwork-container .workbox:hover img.main {
		position: absolute;
	    top: 0;
	    left: -200%;
	    z-index: 1;
	    width: 354%;
	}
	.gridwork-container .workbox img.vendor,.gridwork-container .workbox.full img.vendor {
		width: 50px;
		height: auto;
		opacity: 1;
	}
	.gridwork-container .workbox img.vendor {
		display: none;
	}
	.gridwork-container .workbox .overlay, .gridwork-container .workbox.full .overlay {
		position: absolute;
		top : 470px;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 2;
		background: url(../images/1200/shading-banner-bottom.png);
		background-size: 100%;
		background-repeat: repeat-x;
		background-position: bottom;
	}
	.gridwork-container .workbox:hover .overlay, .gridwork-container .workbox.full:hover .overlay {
		position: absolute;
		top : 470px;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 2;
		background: url(../images/1200/shading-banner-bottom.png);
		background-size: 100%;
		background-repeat: repeat-x;
		background-position: bottom;
	}
	.gridwork-container .workbox .text-container, .gridwork-container .workbox.full .text-container {
		position: absolute;
		z-index: 3;
		top : 15%;
		left: 5%;
		width: 90% !important;
		opacity: 1;	
		display: block;
	}
	.gridwork-container .workbox .text-container .label, .gridwork-container .workbox.full .text-container .label {
		font-family: "DIN Bold";
		color: #fff;
		font-size: 26px;
		line-height: 90%;
	}
	.gridwork-container .workbox .text-container .label .sublabel, .gridwork-container .workbox.full .text-container .label .sublabel {
		font-family: "DIN";
		font-size: 12px;
	}
	.gridwork-container .workbox .text-container .label .ourproduct, .gridwork-container .workbox.full .text-container .label .ourproduct {
		font-family: "DIN";
		margin-top: 5px;
		padding-top: 5px;
		font-size: 13px;
		text-transform: uppercase;
		border : none;
	}
	.content-wrapper .footer-wrapper.small .downcopy {
	    background: #272727 none repeat scroll 0% 0%;
	    color: #FFF;
	    width: 234px;
	    height: 14px;
	    font-family: "DIN";
	    font-size: 11px;
	    position: absolute;
	    z-index: 3;
	    bottom: 0px;
	    left: 5%;
	    padding: 12px 10px;
	}
	.header-wrapper.detail-work {
	    height: 394px;
	    margin-top: 50px;
	    overflow: hidden;
	}	
	.content-wrapper .header-wrapper .banner-wrapper img {
	    top: 13px;
	    left: -225px;
	    width: 250%;
	    position: absolute;
	    z-index: 1;
	}
	.content-wrapper .header-wrapper .banner-wrapper.detailwork .overlay-black {
	    position: absolute;
	    z-index: 2;
	    top: 36%;
	    left: 0px;
	    width: 100%;
	    height: 50%;
	    background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
	}
	.content-wrapper .header-wrapper .banner-wrapper.detailwork .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 37%;
	    left: 5%;
	    width: 50%;
	    height: 300px;
	}
	.video-wrapper img {
	    width: 150%;
	    position: absolute;
	    z-index: 1;
	    top: 0px;
	    left: -25%;
	}
	.video-wrapper .play-icon {
	    position: absolute;
	    z-index: 3;
	    top: 28%;
	    left: 0px;
	    width: 100%;
	    text-align: center;
	    font-size: 52px;
	    color: rgba(255, 255, 255, 0.5);
	}
	.video-wrapper .text-area {
	    position: absolute;
	    z-index: 4;
	    color: #FFF;
	    font-size: 16px;
	    font-family: "DIN Medium";
	    bottom: 20px;
	    left: 5%;
	}
	.video-wrapper .text-area .bigger {
	    font-size: 15px;
	}
	.video-wrapper {
	    padding: 0px;
	    margin: -5px 0px 0px;
	    height: 167px;
	    position: relative;
	    overflow: hidden;
	}
	.desc-wrapper .desc {
	    font-family: "DIN";
	    color: #272727;
	    font-size: 12px;
	    line-height: 130%;
	}
	.carousel-container .preview img {
	    height: 253px;
	}
	.carousel-container .preview {
	    min-height: 259px;
	}
	.content-wrapper .clients .client-wrapper .thumb-container .box {
		padding: 1.5% ;
		margin: 1.5% ;
		width: 43%;
		opacity: 0.7;
		transition : all 0.5s;
		-moz-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-webmit-transition : all 0.5s;
		-o-transition : all 0.5s;
	}
	.content-wrapper .clients .client-wrapper .thumb-container .box:hover {
		opacity: 1;
	}	



	.content-wrapper .header-wrapper .banner-wrapper .overlay-black {
		position: absolute;
		z-index: 2;
		top : 0;
		left: 0;
		width: 100%;
		height: 100%;
		background : rgba(0,0,0,0.3);
	}
	.brand-color {
	    width: 275px;
	    height: 51px;
	    background: url(../images/1200/thinkerboldlogo.png);
	    background-size: 100%;
	    background-position: center;
	    background-repeat: no-repeat;
	    margin-left: -2px;
	}	
	.content-wrapper .header-wrapper.home-mobile .white-wrapper {
	    top: 680px;
	    left: 0px;
	    width: 100%;
	    height: 230px;
	    background-color: #8f6601;
	    z-index: 3;
	    position: absolute;
	    padding: 0px;
	    margin: 0px;
	}
	.content-wrapper .body-wrapper .media {
	    background: #fff;
	    width: 90%;
	    min-height: 300px;
	    padding: 3% 5%;
	    position: relative;
	    text-align: center;
	}
	.specialheading {
	    font-family: "DIN";
	    font-size: 32px;
	    color: #474747;
	    text-align: center;
	    line-height: 62%;
	}
	.specialheading .yellowline {
	    width: 30px;
	    height: 5px;
	    background: #ffd916;
	    margin-top: 0;
	    display: inline-block;
	}
	.content-wrapper .body-wrapper .media .description {
	    font-family: "DIN";
	    color: #444;
	    font-size: 13px;
	    line-height: 140%;
	    margin-bottom: 30px;
	    width: 90%;
	    margin: 5px 0;
	}
	.content-wrapper .body-wrapper .media.about {
	    background: url(../images/1200/bg-home-aboutservices.jpg) #FEBF02;
	    background-position: center top;
	    background-repeat: no-repeat;
	    background-size: 200%;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item {
	    width: 40%;
	    padding: 0;
	    margin-bottom: 30px;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item .icon-area {
	    height: 50px;
	}
	.servicemobile {
		text-align: center;
	}
	.content-wrapper .body-wrapper .services {
	    background: #fff;
	    width: 90%;
	    padding: 9% 5%;
	    position: relative;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item.about {
	    width: 100%;
	    padding: 0;
	    margin-bottom: 30px;
	}
	.content-wrapper .footer-wrapper.aboutpage {
	    background: url('../images/1200/bg-awards.jpg') #000;
	    background-repeat: no-repeat;
	    background-position: center right -87px;
	    background-size: 337%;
	    height: 280px;
	}	
	.content-wrapper .footer-wrapper .biggertext {
	    font-family: "DIN";
	    font-size: 20px;
	    color: #272727;
	    text-align: center;
	}
	.content-wrapper .footer-wrapper .smallertext {
	    font-family: "DIN";
	    font-size: 18px;
	    color: #474747;
	    text-align: center;
	    margin-bottom: 15px;
	}
	.content-wrapper .footer-wrapper .btnarea-award {
		text-align: center;
	}
	.career-heading .biggertext {
	    font-family: "DIN";
	    font-size: 34px;
	    color: #ffd916;
	    text-align: center;
	}
	.career-heading .smallertext {
	    font-family: "DIN";
	    font-size: 25px;
	    color: #575757;
	    text-align: center;
	}
	.career-full {
		width: 100%;
		text-align: center;
	}
	.career-full img {
		width: 80% !important;
	}
	.career-footer {
	    width: 90%;
	    padding: 7% 5%;
	    background: #f0f0f0;
	    margin-top: 10px;
	}
	.gridwork-container .workbox .media-container {
	    position: absolute;
	    z-index: 5;
	    top: 460px;
	    left: 0;
	    width: 100%;
	    height: 200px;
	}
	.gridwork-container .workbox .media-container .thumb-container {
	    position: absolute;
	    z-index: 2;
	    top: 34px;
	    left: 0;
	    width: 100%;
	}
	.gridwork-container .workbox .media-container .thumb-container .item {
	    height: 131px;
	    overflow: hidden;
	    margin-right: 14px;
	    position: relative;
	}
	.workbox .media-container .thumb-container .item {
	    height: 143px;
	    overflow: hidden;
	    margin: 7px;
	    position: relative;
	}
	.gridwork-container .workbox .media-container .nav {
		top: 80px;
	}
	.gridwork-container .workbox .media-container .nav.next {
	    right: 1%;
	}
	.gridwork-container .workbox .media-container .nav.prev {
	    left: 1%;
	}
	.gridwork-container .workbox .text-container .description {
	    font-family: 'DINPro-Light';
	    font-size: 15px;
	    width: 100%;
	    line-height: 120%;
	    margin-top: 20px;
	    margin-bottom: 20px;
	}
	.content-wrapper .footer-wrapper.aboutpage {
		padding-top: 60px;
		padding-bottom: 0;
	}
	.specialheading.white {
	    font-family: "DINPro-Light";
	    font-size: 32px;
	    color: #FFF;
	}
	.media-popup {
		position: fixed;
		z-index: 10001;
		top : 20%;
		left: 0;
		width: 100%;
		display: none;
	}
	.media-popup button.closepopup {
		position: absolute;
		z-index: 2;
		top : -15px;
		right: -10px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		color: #000;
		font-size: 18px;
		background: #FFD916;
		border: none;
	}
	.media-popup button.nav {
		position: absolute;
		z-index: 3;
		top : 20%;
		height: 60%;
		padding: 0 2%;
		font-size: 42px;
		color: #fff;
		background: none;
		border: none;
		opacity: 0.5;
		transition : all 0.5s;
		-moz-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-webkit-transition : all 0.5s;
		-o-transition : all 0.5s;
	}
	.media-popup button.nav:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	.media-popup button.nav.prev {
		left: 0;
	}
	.media-popup button.nav.next {
		right: 0;
	}
	.media-popup .media-container {
		width: 280px;
		position: relative;
		padding: 5px;
		background: #fff;
		border-radius: 10px;
		min-height: 100px;
		box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-ms-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-o-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	}	
}



@media(min-width: 480px) and (max-width: 639px) {
	.desktop-view {
		display: none !important;
	}
	.mobile-view {
		display: inline-block !important;
	}
	button.start-project {
		display: none;
	}
	.mainmenu-fixed .navbar-container .navbar-wrapper .brand {
    	width: 60%;
    	margin-left: -10px;
	}
	.mainmenu-fixed .navbar-container .navbar-wrapper .social {
    	width: 38%;
	}
	.content-wrapper .header-wrapper .navbar-top .navbar-container .brand {
    	width: 60%;
	}
	.content-wrapper .header-wrapper .navbar-top .navbar-container .social {
 	   width: 38%;
	}
	.content-wrapper .header-wrapper.home-mobile {
	    padding: 0px;
	    margin: 0px 0px -5px;
	    position: relative;
	    display: inline-block;
	    height: 550px;
	    overflow: hidden;
	}
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 100px;
	    left: 5%;
	    width: 90%;
	    height: 150px;
	    text-align: center;
	}
	.content-wrapper .header-wrapper.home-mobile .gallery-wrapper {
	    position: absolute;
	    z-index: 10;
	    top: 300px;
	    left: -25%;
	    width: 150%;
	    height: 235px;	
	    overflow: hidden;
	}
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container .label {
		font-size: 32px;
		line-height: 150%;
	}	
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container .label button {
		margin-top: 10px;
	}	
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper img {
	    top: 0px;
	    left: -15%;
	    width: 130%;
	    position: absolute;
	    z-index: 1;
	}	
	.content-wrapper .header-wrapper.home-mobile .white-wrapper {
	    top: 330px;
	    left: 0px;
	    width: 100%;
	    height: 230px;
	    background-color: #FFF;
	    z-index: 3;
	    position: absolute;
	    padding: 0px;
	    margin: 0px;
	}	
	.content-wrapper .body-wrapper .media .heading-title {
	    font-family: "DIN Bold";
	    color: #272727;
	    font-size: 18px;
	    margin-bottom: 20px;
	    margin-top: 20px;
	}	
	.content-wrapper .footer-wrapper.mobile-view {
	    width: 100%;
	    padding: 0;
	    position: relative;
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader {
	    width: 100%;
	    left: 0;
	    top : 0;
	    padding: 10px 0;
	    height: 200px;
	    position: relative;
	    background: transparent url("../images/1200/footer2.jpg") no-repeat scroll top center / 100% auto;
	}	
	.content-wrapper .footer-wrapper.mobile-view .redarea {
	    width: 100%;
	    height: 132px;
	    position: relative;
	    background: #9E3230 url("../images/1200/footer1.jpg") no-repeat scroll center center / 200% auto;
	}
	.content-wrapper .footer-wrapper {
	    height: 352px;
	    background: #9E3230 url("../images/1200/footer1.jpg") no-repeat scroll center center / 100% auto;
	    width: 90%;
	    padding: 5%;
	    position: relative;
	}	
	.content-wrapper .footer-wrapper.mobile-view .darthvader fieldset.career {
		border-top: solid 2px #E24745;
		border-right: none;
		border-left : none;
		border-bottom : none;
		font-family: "DIN Medium";
		color: #E24745;
		font-size: 22px;	
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader fieldset.career legend {
		padding: 5px;
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader .desc {
		width: 90%;
		padding: 0 5%;
		font-family: "DIN";
		color: #fff;
		font-size: 12px;
		line-height: 140%;
	}
	button.common-transparent.footer-red {
	    border: 2px double #D04543;
	    color: #D04543;
	    opacity: 0.7;
	    font-size: 14px;
	    width: 100%;
	    height: 40px;
	    margin-top: 20px;
	}
	.content-wrapper .footer-wrapper.mobile-view .redarea .biggertext {
		width: 90%;
		padding: 5%;
		font-family: "DIN bold";
		color: #fff;
		font-size: 18px;
		line-height: 140%;	
	}
	.content-wrapper .footer-wrapper.mobile-view .redarea .copy {
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		font-size: 10px;
		color: #fff;
		font-family: "DIN";
		color: #fff;
		background: #272727;
		padding: 10px 20px;
	}
	.swiper-slide {
		border : double 1px transparent;
		overflow: hidden;
		width: 150px;
		height: 235px;
		position: relative;
	}
	.swiper-slide img.slide-img {
		width: 100%;
	}
	.swiper-slide img.main {
		width: 120%;
		position: absolute;
		top : -10%;
		left: -10%;
		z-index: 1;
	}
	.swiper-slide .label-container {
		position: absolute;
		z-index: 2;
		background: rgba(255,217,22,0.8);
		top : 235px;
		left: 0;
		width: 100%;
		height: 235px;
		transition : all 0.5s;
		-webkit-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-o-transition : all 0.5s;
		-moz-transition : all 0.5s;	
	}
	.swiper-slide.highlight .label-container {
		top : 0;
	}
	.swiper-slide .label-container .label {
		width: 95%;
		position: absolute;
		z-index: 1;
		color: #fff;
		left: 5%;
		top : 15px;
		line-height: 70%;
	}
	.swiper-slide .label-container .label .title {
		font-family: "DIN Bold";
		font-size: 28px;
		line-height: 130%;
		text-transform: uppercase;
	}
	.swiper-slide .label-container .label .type {
		font-family: "DIN";
		font-size: 10px;
	}
	.swiper-slide .label-container .label .client {
		font-family: "DIN";
		font-size: 11px;
		text-transform: uppercase;
	}
	.swiper-slide .label-container .label hr.white-separator {
		border: none;
		height: 1px;
		background: #fff;
	}
	.swiper-slide .label-container .client-icon {
		width : 30px;
		right: 10px;
		bottom : 10px;
		position: absolute;
	}
	.services-wrapper {
		text-align: center;
	}
	.header-wrapper.aboutpage {
		height:273px;
	}	
	.header-wrapper.aboutpage img {
		width: 300%;
	}
	.content-wrapper .header-wrapper.aboutpage {
		height: 400px;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper img {
		top: 0;
		left: -308px;
		width: 302%;
		position: absolute;
		z-index: 1;
	}	
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container{
	    width: 90%;
	    top : 100px;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container .label {
	    font-size: 23px;
	    color: #FFF;
	    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	    font-family: "DIN";
	    line-height: 80%;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container .label .sublabel {
	    font-size: 14px;
	}
	.header-wrapper.aboutpage .white-wrapper {
	    top: 250px;
	    min-height: 250px;
	}
	.header-wrapper.aboutpage .white-wrapper .text-container {
		font-size: 11px;
	}
	.content-wrapper .body-wrapper .media .description {
	    font-family: "DIN";
	    color: #888;
	    font-size: 12px;
	    line-height: 140%;
	    margin-bottom: 30px;
	}
	.content-wrapper .clients {
	    width: 100%;
	    background: #272727;
	}
	.content-wrapper .footer-wrapper.about {
	    height: 300px;
	    background: #9E3230 url("../images/1200/footer3.jpg") no-repeat scroll center center / 204% auto;
	    width: 90%;
	    padding: 5%;
	    position: relative;
	}
	.content-wrapper .footer-wrapper.about .text-area {
	    width: 90%;
	    left: 5%;
	    top: 20px;
	    position: absolute;
	    z-index: 2;
	    display: inline-block;
	    line-height: 60%;
	    height: 290px;
	}	
	.content-wrapper .footer-wrapper .text-area .small {
	    font-family: "DIN";
	    color: #FFF;
	    font-size: 13px;
	    line-height: 150%;
	}
	.content-wrapper .footer-wrapper .text-area .bigger {
	    font-family: "DIN Bold";
	    color: #FFF;
	    font-size: 23px;
	    line-height: 150%;
	}
	.content-wrapper .contact-wrapper {
		width: 100%;
		height: 800px;
		position: relative;
		margin: 0;
		padding: 0;
	}
	.content-wrapper .contact-wrapper .maps {
		position: relative;
		width: 100%;
		height: 400px;
		position: relative;
		background: #fff;
	}
	.content-wrapper .contact-wrapper .boxwhite {
		position: relative;
		background: #fff;
		width: 100%;
		top : 10px;
		left: 0;
		box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	}
	.content-wrapper .header-wrapper.aboutpage.careerpage {
			height: 257px;
	}
	.content-wrapper .career-container .item {
	    width: 100%;
	    height: 249px;
	    margin: -2px;
	    overflow: hidden;
	    position: relative;
	}
	.content-wrapper .career-container .item .text-container {
	    width: 100%;
	    position: absolute;
	    z-index: 3;
	    top: 27px;
	    left: 0px;
	}
	.header-wrapper.careerpage {
	    height: 270px;
	}
	.content-wrapper .header-wrapper .banner-wrapper img {
	    top: 22px;
	    left: -188px;
	    width: 210%;
	    position: absolute;
	    z-index: 1;
	}
	.content-wrapper .header-wrapper .banner-wrapper .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 91px;
	    height: 300px;
	}
	.content-wrapper .header-wrapper .banner-wrapper .text-container img.icon {
	    width: 130px;
	    position: relative;
	    display: inline-block;
	    left: 0;
	}
	.content-wrapper .career-wrapper {
	    width: 90%;
	    padding: 3% 5%;
	    background: #fff;
	}
	.content-wrapper .career-wrapper.full {
	    width: 100%;
	    padding: 0;
	    background: #FFF none repeat scroll 0% 0%;
	}
	.content-wrapper .career-wrapper.full .content {
		width: 90%;
		padding: 5%;
	}
	.content-wrapper .career-wrapper.full .apply {
	    height: 230px;
	    background: transparent url("../images/1200/footer2.jpg") no-repeat scroll center top / 100% auto;
	    overflow: hidden;
	    padding: 20px 0px;
	    width: 100%;
	}
	.gridwork-container .workbox {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 150px;
		overflow: hidden;
		position: relative;
		margin-left: 0px;
	}	
	.gridwork-container .workbox.full {
		width: 100%;
		margin-left: 0;
		height: 658px;
	}
	.gridwork-container .workbox img.main {
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    width: 100%;
	}
	.gridwork-container .workbox:hover img.main {
		position: absolute;
	    top: 0;
	    left: -200%;
	    z-index: 1;
	    width: 354%;
	}
	.gridwork-container .workbox img.vendor,.gridwork-container .workbox.full img.vendor {
		width: 50px;
		height: auto;
		opacity: 1;
	}
	.gridwork-container .workbox img.vendor {
		display: none;
	}
	.gridwork-container .workbox .overlay, .gridwork-container .workbox.full .overlay {
		position: absolute;
		top : 470px;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 2;
		background: url(../images/1200/shading-banner-bottom.png);
		background-size: 100%;
		background-repeat: repeat-x;
		background-position: bottom;
	}
	.gridwork-container .workbox:hover .overlay, .gridwork-container .workbox.full:hover .overlay {
		position: absolute;
		top : 470px;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 2;
		background: url(../images/1200/shading-banner-bottom.png);
		background-size: 100%;
		background-repeat: repeat-x;
		background-position: bottom;
	}
	.gridwork-container .workbox .text-container, .gridwork-container .workbox.full .text-container {
		position: absolute;
		z-index: 3;
		top : 15%;
		left: 5%;
		width: 90% !important;
		opacity: 1;	
		display: block;
	}
	.gridwork-container .workbox .text-container .label, .gridwork-container .workbox.full .text-container .label {
		font-family: "DIN Bold";
		color: #fff;
		font-size: 26px;
		line-height: 90%;
	}
	.gridwork-container .workbox .text-container .label .sublabel, .gridwork-container .workbox.full .text-container .label .sublabel {
		font-family: "DIN";
		font-size: 12px;
	}
	.gridwork-container .workbox .text-container .label .ourproduct, .gridwork-container .workbox.full .text-container .label .ourproduct {
		font-family: "DIN";
		margin-top: 5px;
		padding-top: 5px;
		font-size: 13px;
		text-transform: uppercase;
		border : none;
	}
	.content-wrapper .footer-wrapper.small .downcopy {
	    background: #272727 none repeat scroll 0% 0%;
	    color: #FFF;
	    width: 234px;
	    height: 14px;
	    font-family: "DIN";
	    font-size: 11px;
	    position: absolute;
	    z-index: 3;
	    bottom: 0px;
	    left: 5%;
	    padding: 12px 10px;
	}
	.header-wrapper.detail-work {
	    height: 394px;
	    margin-top: 50px;
	    overflow: hidden;
	}	
	.content-wrapper .header-wrapper .banner-wrapper img {
	    top: 13px;
	    left: -225px;
	    width: 250%;
	    position: absolute;
	    z-index: 1;
	}
	.content-wrapper .header-wrapper .banner-wrapper.detailwork .overlay-black {
	    position: absolute;
	    z-index: 2;
	    top: 36%;
	    left: 0px;
	    width: 100%;
	    height: 50%;
	    background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
	}
	.content-wrapper .header-wrapper .banner-wrapper.detailwork .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 37%;
	    left: 5%;
	    width: 50%;
	    height: 300px;
	}
	.video-wrapper img {
	    width: 150%;
	    position: absolute;
	    z-index: 1;
	    top: 0px;
	    left: -25%;
	}
	.video-wrapper .play-icon {
	    position: absolute;
	    z-index: 3;
	    top: 28%;
	    left: 0px;
	    width: 100%;
	    text-align: center;
	    font-size: 52px;
	    color: rgba(255, 255, 255, 0.5);
	}
	.video-wrapper .text-area {
	    position: absolute;
	    z-index: 4;
	    color: #FFF;
	    font-size: 16px;
	    font-family: "DIN Medium";
	    bottom: 20px;
	    left: 5%;
	}
	.video-wrapper .text-area .bigger {
	    font-size: 15px;
	}
	.video-wrapper {
	    padding: 0px;
	    margin: -5px 0px 0px;
	    height: 167px;
	    position: relative;
	    overflow: hidden;
	}
	.desc-wrapper .desc {
	    font-family: "DIN";
	    color: #272727;
	    font-size: 12px;
	    line-height: 130%;
	}
	.carousel-container .preview img {
	    height: 253px;
	}
	.carousel-container .preview {
	    min-height: 259px;
	}
	.content-wrapper .clients .client-wrapper .thumb-container .box {
		padding: 1.5% ;
		margin: 1.5% ;
		width: 43%;
		opacity: 0.7;
		transition : all 0.5s;
		-moz-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-webmit-transition : all 0.5s;
		-o-transition : all 0.5s;
	}
	.content-wrapper .clients .client-wrapper .thumb-container .box:hover {
		opacity: 1;
	}	



	.content-wrapper .header-wrapper .banner-wrapper .overlay-black {
		position: absolute;
		z-index: 2;
		top : 0;
		left: 0;
		width: 100%;
		height: 100%;
		background : rgba(0,0,0,0.3);
	}
	.brand-color {
	    width: 275px;
	    height: 51px;
	    background: url(../images/1200/thinkerboldlogo.png);
	    background-size: 100%;
	    background-position: center;
	    background-repeat: no-repeat;
	    margin-left: -2px;
	}	
	.content-wrapper .header-wrapper.home-mobile .white-wrapper {
	    top: 330px;
	    left: 0px;
	    width: 100%;
	    height: 230px;
	    background-color: #8f6601;
	    z-index: 3;
	    position: absolute;
	    padding: 0px;
	    margin: 0px;
	}
	.content-wrapper .body-wrapper .media {
	    background: #fff;
	    width: 90%;
	    min-height: 300px;
	    padding: 3% 5%;
	    position: relative;
	    text-align: center;
	}
	.specialheading {
	    font-family: "DIN";
	    font-size: 32px;
	    color: #474747;
	    text-align: center;
	    line-height: 62%;
	}
	.specialheading .yellowline {
	    width: 30px;
	    height: 5px;
	    background: #ffd916;
	    margin-top: 0;
	    display: inline-block;
	}
	.content-wrapper .body-wrapper .media .description {
	    font-family: "DIN";
	    color: #444;
	    font-size: 13px;
	    line-height: 140%;
	    margin-bottom: 30px;
	    width: 90%;
	    margin: 5px 0;
	}
	.content-wrapper .body-wrapper .media.about {
	    background: url(../images/1200/bg-home-aboutservices.jpg) #FEBF02;
	    background-position: center top;
	    background-repeat: no-repeat;
	    background-size: 200%;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item {
	    width: 40%;
	    padding: 0;
	    margin-bottom: 30px;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item .icon-area {
	    height: 50px;
	}
	.servicemobile {
		text-align: center;
	}
	.content-wrapper .body-wrapper .services {
	    background: #fff;
	    width: 90%;
	    padding: 9% 5%;
	    position: relative;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item.about {
	    width: 100%;
	    padding: 0;
	    margin-bottom: 30px;
	}
	.content-wrapper .footer-wrapper.aboutpage {
	    background: url('../images/1200/bg-awards.jpg') #000;
	    background-repeat: no-repeat;
	    background-position: center right -87px;
	    background-size: 337%;
	    height: 280px;
	}	
	.content-wrapper .footer-wrapper .biggertext {
	    font-family: "DIN";
	    font-size: 20px;
	    color: #272727;
	    text-align: center;
	}
	.content-wrapper .footer-wrapper .smallertext {
	    font-family: "DIN";
	    font-size: 18px;
	    color: #474747;
	    text-align: center;
	    margin-bottom: 15px;
	}
	.content-wrapper .footer-wrapper .btnarea-award {
		text-align: center;
	}
	.career-heading .biggertext {
	    font-family: "DIN";
	    font-size: 34px;
	    color: #ffd916;
	    text-align: center;
	}
	.career-heading .smallertext {
	    font-family: "DIN";
	    font-size: 25px;
	    color: #575757;
	    text-align: center;
	}
	.career-full {
		width: 100%;
		text-align: center;
	}
	.career-full img {
		width: 80% !important;
	}
	.career-footer {
	    width: 90%;
	    padding: 7% 5%;
	    background: #f0f0f0;
	    margin-top: 10px;
	}
	.gridwork-container .workbox .media-container {
	    position: absolute;
	    z-index: 5;
	    top: 460px;
	    left: 0;
	    width: 100%;
	    height: 200px;
	}
	.gridwork-container .workbox .media-container .thumb-container {
	    position: absolute;
	    z-index: 2;
	    top: 34px;
	    left: 0;
	    width: 100%;
	}
	.gridwork-container .workbox .media-container .thumb-container .item {
	    height: 143px;
	    overflow: hidden;
	    margin-right: 14px;
	    position: relative;
	}
	.workbox .media-container .thumb-container .item {
	    height: 143px;
	    overflow: hidden;
	    margin: 7px;
	    position: relative;
	}
	.gridwork-container .workbox .media-container .nav {
		top: 80px;
	}
	.gridwork-container .workbox .media-container .nav.next {
	    right: 1%;
	}
	.gridwork-container .workbox .media-container .nav.prev {
	    left: 1%;
	}
	.gridwork-container .workbox .text-container .description {
	    font-family: 'DINPro-Light';
	    font-size: 15px;
	    width: 100%;
	    line-height: 120%;
	    margin-top: 20px;
	    margin-bottom: 20px;
	}
	.content-wrapper .footer-wrapper.aboutpage {
		padding-top: 60px;
		padding-bottom: 0;
	}
	.specialheading.white {
	    font-family: "DINPro-Light";
	    font-size: 32px;
	    color: #FFF;
	}	
	.media-popup {
		position: fixed;
		z-index: 10001;
		top : 20%;
		left: 0;
		width: 100%;
		display: none;
	}
	.media-popup button.closepopup {
		position: absolute;
		z-index: 2;
		top : -15px;
		right: -10px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		color: #000;
		font-size: 18px;
		background: #FFD916;
		border: none;
	}
	.media-popup button.nav {
		position: absolute;
		z-index: 3;
		top : 20%;
		height: 60%;
		padding: 0 2%;
		font-size: 42px;
		color: #fff;
		background: none;
		border: none;
		opacity: 0.5;
		transition : all 0.5s;
		-moz-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-webkit-transition : all 0.5s;
		-o-transition : all 0.5s;
	}
	.media-popup button.nav:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	.media-popup button.nav.prev {
		left: 0;
	}
	.media-popup button.nav.next {
		right: 0;
	}
	.media-popup .media-container {
		width: 400px;
		position: relative;
		padding: 5px;
		background: #fff;
		border-radius: 10px;
		min-height: 100px;
		box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-ms-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-o-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	}	
}

@media(min-width: 640px) and (max-width: 900px) {
	.desktop-view {
		display: none !important;
	}
	.mobile-view {
		display: inline-block !important;
	}
	button.start-project {
		display: none;
	}
	.mainmenu-fixed .navbar-container .navbar-wrapper .brand {
    	width: 60%;
    	margin-left: -10px;
	}
	.mainmenu-fixed .navbar-container .navbar-wrapper .social {
    	width: 38%;
	}
	.content-wrapper .header-wrapper .navbar-top .navbar-container .brand {
    	width: 60%;
	}
	.content-wrapper .header-wrapper .navbar-top .navbar-container .social {
 	   width: 38%;
	}
	.content-wrapper .header-wrapper.home-mobile {
	    padding: 0px;
	    margin: 0px 0px -5px;
	    position: relative;
	    display: inline-block;
	    height: 550px;
	    overflow: hidden;
	}
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 100px;
	    left: 5%;
	    width: 90%;
	    height: 150px;
	    text-align: center;
	}
	.content-wrapper .header-wrapper.home-mobile .gallery-wrapper {
	    position: absolute;
	    z-index: 10;
	    top: 300px;
	    left: -25%;
	    width: 150%;
	    height: 235px;	
	    overflow: hidden;
	}
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container .label {
		font-size: 32px;
		line-height: 150%;
	}	
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper .text-container .label button {
		margin-top: 10px;
	}	
	.content-wrapper .header-wrapper.home-mobile .banner-wrapper img {
	    top: 0px;
	    left: -15%;
	    width: 130%;
	    position: absolute;
	    z-index: 1;
	}	
	.content-wrapper .header-wrapper.home-mobile .white-wrapper {
	    top: 330px;
	    left: 0px;
	    width: 100%;
	    height: 230px;
	    background-color: #FFF;
	    z-index: 3;
	    position: absolute;
	    padding: 0px;
	    margin: 0px;
	}	
	.content-wrapper .body-wrapper .media .heading-title {
	    font-family: "DIN Bold";
	    color: #272727;
	    font-size: 18px;
	    margin-bottom: 20px;
	    margin-top: 20px;
	}	
	.content-wrapper .footer-wrapper.mobile-view {
	    width: 100%;
	    padding: 0;
	    position: relative;
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader {
	    width: 100%;
	    left: 0;
	    top : 0;
	    padding: 10px 0;
	    height: 200px;
	    position: relative;
	    background: transparent url("../images/1200/footer2.jpg") no-repeat scroll top center / 100% auto;
	}	
	.content-wrapper .footer-wrapper.mobile-view .redarea {
	    width: 100%;
	    height: 132px;
	    position: relative;
	    background: #9E3230 url("../images/1200/footer1.jpg") no-repeat scroll center center / 200% auto;
	}
	.content-wrapper .footer-wrapper {
	    height: 352px;
	    background: #9E3230 url("../images/1200/footer1.jpg") no-repeat scroll center center / 100% auto;
	    width: 90%;
	    padding: 5%;
	    position: relative;
	}	
	.content-wrapper .footer-wrapper.mobile-view .darthvader fieldset.career {
		border-top: solid 2px #E24745;
		border-right: none;
		border-left : none;
		border-bottom : none;
		font-family: "DIN Medium";
		color: #E24745;
		font-size: 22px;	
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader fieldset.career legend {
		padding: 5px;
	}
	.content-wrapper .footer-wrapper.mobile-view .darthvader .desc {
		width: 90%;
		padding: 0 5%;
		font-family: "DIN";
		color: #fff;
		font-size: 12px;
		line-height: 140%;
	}
	button.common-transparent.footer-red {
	    border: 2px double #D04543;
	    color: #D04543;
	    opacity: 0.7;
	    font-size: 14px;
	    width: 100%;
	    height: 40px;
	    margin-top: 20px;
	}
	.content-wrapper .footer-wrapper.mobile-view .redarea .biggertext {
		width: 90%;
		padding: 5%;
		font-family: "DIN bold";
		color: #fff;
		font-size: 18px;
		line-height: 140%;	
	}
	.content-wrapper .footer-wrapper.mobile-view .redarea .copy {
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		font-size: 10px;
		color: #fff;
		font-family: "DIN";
		color: #fff;
		background: #272727;
		padding: 10px 20px;
	}
	.swiper-slide {
		border : double 1px transparent;
		overflow: hidden;
		width: 150px;
		height: 235px;
		position: relative;
	}
	.swiper-slide img.slide-img {
		width: 100%;
	}
	.swiper-slide img.main {
		width: 120%;
		position: absolute;
		top : -10%;
		left: -10%;
		z-index: 1;
	}
	.swiper-slide .label-container {
		position: absolute;
		z-index: 2;
		background: rgba(255,217,22,0.8);
		top : 235px;
		left: 0;
		width: 100%;
		height: 235px;
		transition : all 0.5s;
		-webkit-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-o-transition : all 0.5s;
		-moz-transition : all 0.5s;	
	}
	.swiper-slide.highlight .label-container {
		top : 0;
	}
	.swiper-slide .label-container .label {
		width: 95%;
		position: absolute;
		z-index: 1;
		color: #fff;
		left: 5%;
		top : 15px;
		line-height: 70%;
	}
	.swiper-slide .label-container .label .title {
		font-family: "DIN Bold";
		font-size: 28px;
		line-height: 130%;
		text-transform: uppercase;
	}
	.swiper-slide .label-container .label .type {
		font-family: "DIN";
		font-size: 10px;
	}
	.swiper-slide .label-container .label .client {
		font-family: "DIN";
		font-size: 11px;
		text-transform: uppercase;
	}
	.swiper-slide .label-container .label hr.white-separator {
		border: none;
		height: 1px;
		background: #fff;
	}
	.swiper-slide .label-container .client-icon {
		width : 30px;
		right: 10px;
		bottom : 10px;
		position: absolute;
	}
	.services-wrapper {
		text-align: center;
	}
	.header-wrapper.aboutpage {
		height:273px;
	}	
	.header-wrapper.aboutpage img {
		width: 300%;
	}
	.content-wrapper .header-wrapper.aboutpage {
		height: 400px;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper img {
		top: 0;
		left: -308px;
		width: 302%;
		position: absolute;
		z-index: 1;
	}	
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container{
	    width: 90%;
	    top : 100px;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container .label {
	    font-size: 23px;
	    color: #FFF;
	    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
	    font-family: "DIN";
	    line-height: 80%;
	}
	.content-wrapper .header-wrapper.aboutpage .banner-wrapper .text-container .label .sublabel {
	    font-size: 14px;
	}
	.header-wrapper.aboutpage .white-wrapper {
	    top: 250px;
	    min-height: 250px;
	}
	.header-wrapper.aboutpage .white-wrapper .text-container {
		font-size: 11px;
	}
	.content-wrapper .body-wrapper .media .description {
	    font-family: "DIN";
	    color: #888;
	    font-size: 12px;
	    line-height: 140%;
	    margin-bottom: 30px;
	}
	.content-wrapper .clients {
	    width: 100%;
	    background: #272727;
	}
	.content-wrapper .footer-wrapper.about {
	    height: 300px;
	    background: #9E3230 url("../images/1200/footer3.jpg") no-repeat scroll center center / 204% auto;
	    width: 90%;
	    padding: 5%;
	    position: relative;
	}
	.content-wrapper .footer-wrapper.about .text-area {
	    width: 90%;
	    left: 5%;
	    top: 20px;
	    position: absolute;
	    z-index: 2;
	    display: inline-block;
	    line-height: 60%;
	    height: 290px;
	}	
	.content-wrapper .footer-wrapper .text-area .small {
	    font-family: "DIN";
	    color: #FFF;
	    font-size: 13px;
	    line-height: 150%;
	}
	.content-wrapper .footer-wrapper .text-area .bigger {
	    font-family: "DIN Bold";
	    color: #FFF;
	    font-size: 23px;
	    line-height: 150%;
	}
	.content-wrapper .contact-wrapper {
		width: 100%;
		height: 800px;
		position: relative;
		margin: 0;
		padding: 0;
	}
	.content-wrapper .contact-wrapper .maps {
		position: relative;
		width: 100%;
		height: 400px;
		position: relative;
		background: #fff;
	}
	.content-wrapper .contact-wrapper .boxwhite {
		position: relative;
		background: #fff;
		width: 100%;
		top : 10px;
		left: 0;
		box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-ms-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	}
	.content-wrapper .header-wrapper.aboutpage.careerpage {
			height: 257px;
	}
	.content-wrapper .career-container .item {
	    width: 100%;
	    height: 249px;
	    margin: -2px;
	    overflow: hidden;
	    position: relative;
	}
	.content-wrapper .career-container .item .text-container {
	    width: 100%;
	    position: absolute;
	    z-index: 3;
	    top: 27px;
	    left: 0px;
	}
	.header-wrapper.careerpage {
	    height: 270px;
	}
	.content-wrapper .header-wrapper .banner-wrapper img {
	    top: 22px;
	    left: -188px;
	    width: 210%;
	    position: absolute;
	    z-index: 1;
	}
	.content-wrapper .header-wrapper .banner-wrapper .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 91px;
	    height: 300px;
	}
	.content-wrapper .header-wrapper .banner-wrapper .text-container img.icon {
	    width: 130px;
	    position: relative;
	    display: inline-block;
	    left: 0;
	}
	.content-wrapper .career-wrapper {
	    width: 90%;
	    padding: 3% 5%;
	    background: #fff;
	}
	.content-wrapper .career-wrapper.full {
	    width: 100%;
	    padding: 0;
	    background: #FFF none repeat scroll 0% 0%;
	}
	.content-wrapper .career-wrapper.full .content {
		width: 90%;
		padding: 5%;
	}
	.content-wrapper .career-wrapper.full .apply {
	    height: 230px;
	    background: transparent url("../images/1200/footer2.jpg") no-repeat scroll center top / 100% auto;
	    overflow: hidden;
	    padding: 20px 0px;
	    width: 100%;
	}
	.gridwork-container .workbox {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 150px;
		overflow: hidden;
		position: relative;
		margin-left: 0px;
	}	
	.gridwork-container .workbox.full {
		width: 100%;
		margin-left: 0;
		height: 658px;
	}
	.gridwork-container .workbox img.main {
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 1;
	    width: 100%;
	}
	.gridwork-container .workbox:hover img.main {
		position: absolute;
	    top: 0;
	    left: -200%;
	    z-index: 1;
	    width: 354%;
	}
	.gridwork-container .workbox img.vendor,.gridwork-container .workbox.full img.vendor {
		width: 50px;
		height: auto;
		opacity: 1;
	}
	.gridwork-container .workbox img.vendor {
		display: none;
	}
	.gridwork-container .workbox .overlay, .gridwork-container .workbox.full .overlay {
		position: absolute;
		top : 470px;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 2;
		background: url(../images/1200/shading-banner-bottom.png);
		background-size: 100%;
		background-repeat: repeat-x;
		background-position: bottom;
	}
	.gridwork-container .workbox:hover .overlay, .gridwork-container .workbox.full:hover .overlay {
		position: absolute;
		top : 470px;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 2;
		background: url(../images/1200/shading-banner-bottom.png);
		background-size: 100%;
		background-repeat: repeat-x;
		background-position: bottom;
	}
	.gridwork-container .workbox .text-container, .gridwork-container .workbox.full .text-container {
		position: absolute;
		z-index: 3;
		top : 15%;
		left: 5%;
		width: 90% !important;
		opacity: 1;	
		display: block;
	}
	.gridwork-container .workbox .text-container .label, .gridwork-container .workbox.full .text-container .label {
		font-family: "DIN Bold";
		color: #fff;
		font-size: 26px;
		line-height: 90%;
	}
	.gridwork-container .workbox .text-container .label .sublabel, .gridwork-container .workbox.full .text-container .label .sublabel {
		font-family: "DIN";
		font-size: 12px;
	}
	.gridwork-container .workbox .text-container .label .ourproduct, .gridwork-container .workbox.full .text-container .label .ourproduct {
		font-family: "DIN";
		margin-top: 5px;
		padding-top: 5px;
		font-size: 13px;
		text-transform: uppercase;
		border : none;
	}
	.content-wrapper .footer-wrapper.small .downcopy {
	    background: #272727 none repeat scroll 0% 0%;
	    color: #FFF;
	    width: 234px;
	    height: 14px;
	    font-family: "DIN";
	    font-size: 11px;
	    position: absolute;
	    z-index: 3;
	    bottom: 0px;
	    left: 5%;
	    padding: 12px 10px;
	}
	.header-wrapper.detail-work {
	    height: 394px;
	    margin-top: 50px;
	    overflow: hidden;
	}	
	.content-wrapper .header-wrapper .banner-wrapper img {
	    top: 13px;
	    left: -225px;
	    width: 250%;
	    position: absolute;
	    z-index: 1;
	}
	.content-wrapper .header-wrapper .banner-wrapper.detailwork .overlay-black {
	    position: absolute;
	    z-index: 2;
	    top: 36%;
	    left: 0px;
	    width: 100%;
	    height: 50%;
	    background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
	}
	.content-wrapper .header-wrapper .banner-wrapper.detailwork .text-container {
	    position: absolute;
	    z-index: 3;
	    top: 37%;
	    left: 5%;
	    width: 50%;
	    height: 300px;
	}
	.video-wrapper img {
	    width: 150%;
	    position: absolute;
	    z-index: 1;
	    top: 0px;
	    left: -25%;
	}
	.video-wrapper .play-icon {
	    position: absolute;
	    z-index: 3;
	    top: 28%;
	    left: 0px;
	    width: 100%;
	    text-align: center;
	    font-size: 52px;
	    color: rgba(255, 255, 255, 0.5);
	}
	.video-wrapper .text-area {
	    position: absolute;
	    z-index: 4;
	    color: #FFF;
	    font-size: 16px;
	    font-family: "DIN Medium";
	    bottom: 20px;
	    left: 5%;
	}
	.video-wrapper .text-area .bigger {
	    font-size: 15px;
	}
	.video-wrapper {
	    padding: 0px;
	    margin: -5px 0px 0px;
	    height: 167px;
	    position: relative;
	    overflow: hidden;
	}
	.desc-wrapper .desc {
	    font-family: "DIN";
	    color: #272727;
	    font-size: 12px;
	    line-height: 130%;
	}
	.carousel-container .preview img {
	    height: 253px;
	}
	.carousel-container .preview {
	    min-height: 259px;
	}
	.content-wrapper .clients .client-wrapper .thumb-container .box {
		padding: 1.5% ;
		margin: 1.5% ;
		width: 43%;
		opacity: 0.7;
		transition : all 0.5s;
		-moz-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-webmit-transition : all 0.5s;
		-o-transition : all 0.5s;
	}
	.content-wrapper .clients .client-wrapper .thumb-container .box:hover {
		opacity: 1;
	}	



	.content-wrapper .header-wrapper .banner-wrapper .overlay-black {
		position: absolute;
		z-index: 2;
		top : 0;
		left: 0;
		width: 100%;
		height: 100%;
		background : rgba(0,0,0,0.3);
	}
	.brand-color {
	    width: 275px;
	    height: 51px;
	    background: url(../images/1200/thinkerboldlogo.png);
	    background-size: 100%;
	    background-position: center;
	    background-repeat: no-repeat;
	    margin-left: -2px;
	}	
	.content-wrapper .header-wrapper.home-mobile .white-wrapper {
	    top: 330px;
	    left: 0px;
	    width: 100%;
	    height: 230px;
	    background-color: #8f6601;
	    z-index: 3;
	    position: absolute;
	    padding: 0px;
	    margin: 0px;
	}
	.content-wrapper .body-wrapper .media {
	    background: #fff;
	    width: 90%;
	    min-height: 300px;
	    padding: 3% 5%;
	    position: relative;
	    text-align: center;
	}
	.specialheading {
	    font-family: "DIN";
	    font-size: 32px;
	    color: #474747;
	    text-align: center;
	    line-height: 62%;
	}
	.specialheading .yellowline {
	    width: 30px;
	    height: 5px;
	    background: #ffd916;
	    margin-top: 0;
	    display: inline-block;
	}
	.content-wrapper .body-wrapper .media .description {
	    font-family: "DIN";
	    color: #444;
	    font-size: 13px;
	    line-height: 140%;
	    margin-bottom: 30px;
	    width: 90%;
	    margin: 5px 0;
	}
	.content-wrapper .body-wrapper .media.about {
	    background: url(../images/1200/bg-home-aboutservices.jpg) #FEBF02;
	    background-position: center top;
	    background-repeat: no-repeat;
	    background-size: 200%;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item {
	    width: 40%;
	    padding: 0;
	    margin-bottom: 30px;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item .icon-area {
	    height: 50px;
	}
	.servicemobile {
		text-align: center;
	}
	.content-wrapper .body-wrapper .services {
	    background: #fff;
	    width: 90%;
	    padding: 9% 5%;
	    position: relative;
	}
	.content-wrapper .body-wrapper .services .services-wrapper .item.about {
	    width: 100%;
	    padding: 0;
	    margin-bottom: 30px;
	}
	.content-wrapper .footer-wrapper.aboutpage {
	    background: url('../images/1200/bg-awards.jpg') #000;
	    background-repeat: no-repeat;
	    background-position: center right -87px;
	    background-size: 337%;
	    height: 280px;
	}	
	.content-wrapper .footer-wrapper .biggertext {
	    font-family: "DIN";
	    font-size: 20px;
	    color: #272727;
	    text-align: center;
	}
	.content-wrapper .footer-wrapper .smallertext {
	    font-family: "DIN";
	    font-size: 18px;
	    color: #474747;
	    text-align: center;
	    margin-bottom: 15px;
	}
	.content-wrapper .footer-wrapper .btnarea-award {
		text-align: center;
	}
	.career-heading .biggertext {
	    font-family: "DIN";
	    font-size: 34px;
	    color: #ffd916;
	    text-align: center;
	}
	.career-heading .smallertext {
	    font-family: "DIN";
	    font-size: 25px;
	    color: #575757;
	    text-align: center;
	}
	.career-full {
		width: 100%;
		text-align: center;
	}
	.career-full img {
		width: 80% !important;
	}
	.career-footer {
	    width: 90%;
	    padding: 7% 5%;
	    background: #f0f0f0;
	    margin-top: 10px;
	}
	.gridwork-container .workbox .media-container {
	    position: absolute;
	    z-index: 5;
	    top: 308px;
	    left: 0;
	    width: 100%;
	    height: 350px;
	}
	.gridwork-container .workbox .media-container .yellow-bg {
	    position: absolute;
	    z-index: 1;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 240px;
	    background: #FFD916;
	}
	.gridwork-container .workbox .media-container .thumb-container {
	    position: absolute;
	    z-index: 2;
	    top: 34px;
	    left: 0;
	    width: 100%;
	}
	.gridwork-container .workbox .media-container .thumb-container .item {
	    height: 300px;
	    overflow: hidden;
	    margin-right: 14px;
	    position: relative;
	}
	.workbox .media-container .thumb-container .item {
	    height: 143px;
	    overflow: hidden;
	    margin: 7px;
	    position: relative;
	}
	.gridwork-container .workbox .media-container .nav {
		top: 46%;
	}
	.gridwork-container .workbox .media-container .nav.next {
	    right: 1%;
	}
	.gridwork-container .workbox .media-container .nav.prev {
	    left: 1%;
	}
	.gridwork-container .workbox .text-container .description {
	    font-family: 'DINPro-Light';
	    font-size: 15px;
	    width: 100%;
	    line-height: 120%;
	    margin-top: 20px;
	    margin-bottom: 20px;
	}
	.content-wrapper .footer-wrapper.aboutpage {
		padding-top: 60px;
		padding-bottom: 0;
	}
	.specialheading.white {
	    font-family: "DINPro-Light";
	    font-size: 32px;
	    color: #FFF;
	}	
	.media-popup {
		position: fixed;
		z-index: 10001;
		top : 20%;
		left: 0;
		width: 100%;
		display: none;
	}
	.media-popup button.closepopup {
		position: absolute;
		z-index: 2;
		top : -15px;
		right: -10px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		color: #000;
		font-size: 18px;
		background: #FFD916;
		border: none;
	}
	.media-popup button.nav {
		position: absolute;
		z-index: 3;
		top : 20%;
		height: 60%;
		padding: 0 2%;
		font-size: 42px;
		color: #fff;
		background: none;
		border: none;
		opacity: 0.5;
		transition : all 0.5s;
		-moz-transition : all 0.5s;
		-ms-transition : all 0.5s;
		-webkit-transition : all 0.5s;
		-o-transition : all 0.5s;
	}
	.media-popup button.nav:hover {
		cursor: pointer;
		opacity: 0.8;
	}
	.media-popup button.nav.prev {
		left: 0;
	}
	.media-popup button.nav.next {
		right: 0;
	}
	.media-popup .media-container {
		width: 400px;
		position: relative;
		padding: 5px;
		background: #fff;
		border-radius: 10px;
		min-height: 100px;
		box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-ms-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
		-o-box-shadow: 0 0 3px rgba(0,0,0,0.3);
	}	
}