/*******************************************/
/*****          Custom Styles          *****/
/*******************************************/


/*******  Typography  ******/


@font-face {
  font-family: 'N';
  src: url('assets/fonts/N.eot?#iefix') format('embedded-opentype'),  url('assets/fonts/N.otf')  format('opentype'), url('assets/fonts/N.woff') format('woff'), url('assets/fonts/N.ttf')  format('truetype'), url('assets/fonts/N.svg#No') format('svg');
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, h4, h5 {
  font-family: 'N';
  font-weight: normal;
}
	
h1 {

}
	
h2 {

}	
		
h3 {

}
	
h4 {

}	
	
h5 {

}
	
p {

}

p.big {
	font-size: 16px;
	line-height: 1.9;
}

p.big a {
	color: #000000;
	text-decoration: none;
	border-bottom: 2px solid #000000;
	padding-bottom: 3px;
}

p.big a:hover {
	color: #9B9B9B;
	border-bottom: 2px solid #9B9B9B;
}

a {
	color: #000000;
	text-decoration: none;
	border-bottom: 1px solid #000000;
	padding-bottom: 2px;
	transition: all 0.3s ;
	-webkit-transition: all 0.3s ;
	-o-transition: all 0.3s ;
	-moz-transition: all 0.3s ;
}

a:hover {
	color: #9B9B9B;
	text-decoration: none;
	border-bottom: 1px solid #9B9B9B;
	padding-bottom: 2px;
	transition: all 0.3s ;
	-webkit-transition: all 0.3s ;
	-o-transition: all 0.3s ;
	-moz-transition: all 0.3s ;
}
	
	

/********  General  ********/

body {
  	padding: 0px;
	font-family: 'Roboto Mono';
	font-weight: 300;
	font-size: 13px;
    line-height: 1.9;
    background-color: #0C2630;
}

img, video {
	width: 100%;
	height: auto;
}
	
.container {
	padding: 40px 15px;
}

.fader {
	-webkit-animation: fadein 1.2s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1.2s; /* Firefox < 16 */
	-ms-animation: fadein 1.2s; /* Internet Explorer */
	-o-animation: fadein 1.2s; /* Opera < 12.1 */
	animation: fadein 1.2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.alt-bg {
	background-color: #F9f9f9;
	padding: 40px 0;
}

.dash {
	width: 25px;
	height: 2px;
	background-color: #000000;
}

.col-2 {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;
}

.mobile-show {
	display: none;
}



/******  Nav  ******/

.navbar .container {
	height: 50px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.navbar.navbar-fixed-top.white {
	background-color: none;
}

.navbar-brand {
	padding: 0px 15px;
}

a.navbar-brand {
	border: none;
}

a.navbar-brand img {
	width: 22px;
	height: 24px;
	margin-top: 13px;
	transition: all 0.3s ;
	-webkit-transition: all 0.3s ;
	-o-transition: all 0.3s ;
	-moz-transition: all 0.3s ;
}

a.navbar-brand img:hover {
    opacity: 0.45;
    filter: alpha(opacity=45); /* For IE8 and earlier */
	transition: all 0.3s ;
	-webkit-transition: all 0.3s ;
	-o-transition: all 0.3s ;
	-moz-transition: all 0.3s ;
}

.menu {
	float: right;
}

.navbar-items {
	margin-top: 13px;
}

.navbar-items > li {
	float: left;
	margin-left: 30px;
	list-style-type: none;
}

.navbar-items > li > a {
	font-size: 13px;
	color: #000000;
	padding-bottom: 2px;
	text-decoration: none;
}

.navbar-items > li > a:hover {
	padding-bottom: 2px;
	color: #9B9B9B;
}
	


/******  Welcome  ******/

.welcome {
	height: 100vh;
	color: #ffffff;
}

.welcome .row {
	position: relative;
	top: 45%;
	-webkit-transform: translateY(-45%);
	-ms-transform: translateY(-45%);
	transform: translateY(-45%);
}

.welcome-text p {
	font-size: 42px;
	line-height: 1.6;
}

.welcome-text p a {
	color: #000000;
	text-decoration: none;
	border-bottom: 2px solid #000000;
	padding-bottom: 3px;
}

.welcome-text p a:hover {
	color: #9B9B9B;
	border-bottom: 2px solid #9B9B9B;
}

.welcome .dash {
	margin: 60px 0 0px;
}



/******  Case Study  ******/

/*.hover:hover {
	background-color: rgba( 0, 0, 0, 0.2 );
	transition: all 0.3s ;
	-webkit-transition: all 0.3s ;
	-o-transition: all 0.3s ;
	-moz-transition: all 0.3s ;
}*/

.cs {
	height: 100vh;
}

.cs .row {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.cs a {
	text-decoration: none;
}

.cs-text h2, .cs-text p {
	color: #ffffff;
}

.cs-text h2 {
	font-size: 48px;
	margin-top: 0px;
}

.cs-text p {
	font-size: 14px;
	margin-top: 0px;
}

.jkaf {
	background: url(assets/images/jkaf/jkaf-bg.jpg) center;
	background-size: cover;
}

.mnu {
	background: url(assets/images/mnu/mnu-bg.jpg) center;
	background-size: cover;
}

.unpack {
	background: url(assets/images/unpack/unpack-bg.jpg) center;
	background-size: cover;
}
	
.cs-body {
	padding: 100px 15px;
}

.intro {
	height: 100vh;
}

.intro .row {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.intro .dash {
	margin: 30px 0 0px;
}

.images .row {
	padding: 0px;
	margin: 0px;
}

.images .row div {
	padding: 0px;
	margin: 0px;
}



/******  About  ******/

.about {
	height: 100vh;
}

.about .row {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}








/*******************************************/
/*****            Responsive           *****/
/*******************************************/

@media (max-width: 1200px) { 

	.welcome p {
		font-size: 36px;
	}
    
}


@media (max-width: 993px) { 

	.welcome p {
		font-size: 48px;
	}

	.cs-text h2 {
		font-size: 42px;
	}

}

@media (max-width: 993px) and (orientation:landscape) { 

	.welcome .dash {
		margin: 30px 0 0px;
	}

	.about {
		height: auto;
	    padding: 60px 15px 20px;
	}

	.about .row div:first-of-type {
		margin-bottom: 30px;
	}

	.about .row {
		position: static;
		top: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}	font-size: 42px;

}


@media (max-width: 769px) { 

	.navbar-header {
		display: inline-block;
	}

	.about {
		height: auto;
	    padding: 60px 15px 20px;
	}

	.about .row div {
		margin-bottom: 30px;
	}

	.about .row {
		position: static;
		top: auto;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

}


@media (max-width: 769px) and (orientation:landscape) { 

	.welcome p {
		font-size: 28px;
	}

	.cs-text h2 {
		font-size: 36px;
	}

}


@media (max-width: 667px) { 

	.cs-text h2 {
		font-size: 32px;
	}	

	.welcome .dash {
		margin: 30px 0 0px;
	}

	.welcome p a {
		color: #000000;
		text-decoration: none;
		border-bottom: 1px solid #000000;
		padding-bottom: 2px;
	}

	.welcome p a:hover {
		color: #9B9B9B;
		border-bottom: 1px solid #9B9B9B;
	}

}


@media (max-width: 667px) and (orientation:landscape) { 

	.welcome p {
		font-size: 24px;
	}

}


@media (max-width: 568px) { 



}


@media (max-width: 568px) and (orientation:landscape) { 

	.welcome p {
		font-size: 20px;
	}

	.welcome .dash {
		height: 1px;
	}

}


@media (max-width: 436px) { 

	.mobile-hide {
		display: none;
	}

	.mobile-show {
		display: block;
	}

	.welcome p {
		font-size: 26px;
	}

	.welcome .dash {
		display: none;
	}
	
	.cs-body {
		padding: 60px 15px;
	}

	p.big {
		font-size: 13px;
	}

}


@media (max-width: 376px) {

	.welcome p {
		font-size: 24px;
	}

}