/*
=====================================================================
*   Kreative v1.0 Layout Stylesheet
*   url: styleshout.com
*   09-26-2013
=====================================================================

   TOC:
   a. Common Styles
   b. Header Styles
   c. Intro Section
   d. Concept
   e. Works
   f. About
   g. Recruit
   h. Access
   i. Voice
   j. Footer Styles
   k. Media Queries

===================================================================== */


/* ================================================================== */

/* a. Common Styles

/* ================================================================== */

.section-head h2 {
	margin-bottom: 12px;
	}
.intro { font: 14px/1px montserrat-regular, sans-serif;
letter-spacing: 1.5px;}

/* Left clearing for flexible columns - columns that changes width in
different screen sizes. Makes columns with different heights align
properly.
--------------------------------------------------------------------- */
.first { clear: left; }   /* first column in default screen */
.m-first { clear: none; } /* first column in medium size screens */



/* ================================================================== */

/* b. Header Styles

/* ================================================================== */

header {
   height: 54px;
   width: 100%;
   z-index: 99999;
   background: url(../images/k-opacity-70.png);
   position: fixed;
   top: 0;
   left: 0;
}
header.static {
   background: #232629;
   position: static;
}

/* header logo */
header .logo {
   position: relative;
   height: 54px;
   width: 315px;
   float: left;
}
header .logo a {
   display: block;
   padding: 0;
   margin: 0;
   height: 20px;
   width: 315px;
   line-height: 18px;

   position: absolute;
   left: 0;
   top: 17px;
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

/* nav-wrap */
#nav-wrap {
	position: relative;
   font: 13px opensans-regular, sans-serif;
   float: right;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   min-height: 54px;
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul#nav li {
	position: relative;
	list-style: none;
   height: 54px;

   display: inline-block;
}
ul#nav > li.active a {
   background: #1f91f2;
   color: #fff !important;
}

/* Links */
ul#nav li a {
   display: block;
   padding: 0 14px;
   line-height: 54px;
	text-decoration: none;
   text-align: left;
   color: #fff;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.active a { color: #1f91f2; }



/* ================================================================== */

/* c. Intro Section

/* ================================================================== */

#Main {
   /*background: #e8e7e7 url(../images/intro-bg.jpg) no-repeat center;*/
   /*background-color: #e8e7e7;*/
   overflow: hidden;
   height: 700px;
   position: relative;
}
.copy {
   text-align: center;
   width: 100%;
   position: absolute;
   top: 50%;
}



/* Direction Navigation
--------------------------------------------------------------- */
.flex-direction-nav a {
   display: block;
	width: 40px;
	height: 66px;
	margin: 0;
	background-color: #2D3339;
	cursor: pointer;
	z-index: 99999;
	opacity: 0;
   position: absolute;
	top: 50%;

   font: 0/0 a;
   text-shadow: none;
   color: transparent;

	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.flex-direction-nav a:hover { background-color: #1f91f2; }

.flex-direction-nav .flex-next {
	right: 0px;
	background: #2D3339 url(../images/direction-nav-right.png) no-repeat 53% 50%;
	position: absolute;
}
.flex-direction-nav .flex-prev {
	left: 0px;
	background: #2D3339 url(../images/direction-nav-left.png) no-repeat 47% 50%;
	position: absolute;
}
.flexslider:hover .flex-next,
.flexslider:hover .flex-prev { opacity: 1; }
.flex-direction-nav .flex-disabled {
   opacity: .3 !important;
   filter: alpha(opacity=30);
   cursor: default;
}


/* ================================================================== */

/* d. Concept

/* ================================================================== */

#Concept {
   padding-top: 140px;
   padding-bottom: 120px;
   color: #4E565F;
}

#Concept a, #Concept a:visited  { color: #C4C4C4; }
#Concept a:hover, #Concept a:focus { color: #094476; }

#Concept .section-head h2 { color: #1f91f2; }
#Concept .section-head .intro { color: #57606B; }

.Concept-wrapper { margin-top: 60px; }
.Concept-wrapper .col {
   width: 50%;
   margin-top: 10px;
   margin-bottom: 25px;
}
.Concept-wrapper h2 {
	font-size: 16px;
	line-height: 150%;
	font-weight: bold;
	letter-spacing: 1.5px;
	color: #1f91f2;
	/*margin-bottom: 12px;*/
}
.Concept-wrapper p {
   font-size: 14px;
   line-height: 180%;
   color: #666;
}


/* ================================================================== */

/* e. About

/* ================================================================== */

#About {
   background-color: #007dd4;
   padding-top: 140px;
   padding-bottom: 120px;
   color: #fff;
}

#About a, #About a:visited  { color: #e9f5ff; }
#About a:hover, #About a:focus { color: #01528b; }

#About .section-head h2 { color: #fff; }
#About .section-head .intro { color: #fff; }

.About-wrapper { margin-top: 60px; }
.About-wrapper .col {
   width: 50%;
   margin-bottom: 25px;
}
.About-wrapper h2 {
	font-size: 16px;
	line-height: 150%;
	font-weight: bold;
	letter-spacing: 1.5px;
	color: #FFF;
	margin-bottom: 14px;
	clear: both;
}
.About-wrapper p.read {
	font-size: 14px;
   line-height: 180%;
   color: #e9f5ff;
	margin-bottom: 40px;
}
.About-wrapper p.left {
	width: 18%;
	float: left;
   font-size: 14px;
   line-height: 150%;
   color: #e9f5ff;
   clear: both;
}
.About-wrapper p.left2 {
	width: 18%;
	text-align: right !important;
	float: left;
	font-size: 14px;
	line-height: 150%;
	letter-spacing: -0.5px;
	color: #e9f5ff;
	clear: both;
}
.About-wrapper p.right {
	width: 78%;
	float: right;
	font-size: 14px;
	line-height: 150%;
	color: #e9f5ff;
}
.About-wrapper p.right2 {
	text-align: right;
	float: right;
	font-size: 14px;
	line-height: 150%;
	color: #e9f5ff;
}
.About-wrapper .office {
	margin: 30px 20px 0 20px;
	padding: 10px 10px 0 10px;
	border: #e9f5ff 1px solid;
	clear: both;
	overflow: hidden;
}
.About-wrapper .office .ttl {
	font: 18px montserrat-bold, sans-serif; 
	line-height: 150%;
	font-weight: bold;
	letter-spacing: 1.5px;
	color: #e9f5ff;
	margin: 5px 0 5px 15px;
}
.About-wrapper .office .col {
	width: 33.333%;
	padding: 0 15px;
}

.About-item .item-wrap {
   overflow: hidden;
}
.About-item .About-item-meta {
	font-size: 12px;
	line-height: 140%;
	color: #e9f5ff;
}

/* ================================================================== */

/* f. Works

/* ================================================================== */

#Works {
   padding-top: 140px;
   padding-bottom: 120px;
   color: #4E565F;
   background-color: #FFF;
}

#Works a, #Concept a:visited  { color: #1f91f2; }
#Works a:hover, #Concept a:focus { color: #094476; }

#Works .section-head h2 { color: #1f91f2; }
#Works .section-head .intro { color: #57606B; }

.Works-wrapper { margin-top: 60px; }
.Works-wrapper .col {
   width: 50%;
   margin-top: 10px;
   margin-bottom: 25px;
}
.Works-wrapper .office .col {
	width: 33.333%;
	padding: 0 15px;
}
.Works-wrapper .office .col img {
	border: 1px #CCC solid;
}
.Works-item .item-wrap {
   overflow: hidden;
}
.Works-item .item-wrap p {
	font-size: 12px;
	line-height: 140%;
	color: #666;
}
#Works .text {
	font-size: 14px;
	margin: 30px 0 0 15px;
}



/* ================================================================== */

/* g. Recruit

/* ================================================================== */

#Recruit {
   background-color: #e8e7e7;
   padding-top: 140px;
   padding-bottom: 120px;
   color: #4E565F;
}

#Recruit a, #Recruit a:visited  { color: #C4C4C4; }
#Recruit a:hover, #Recruit a:focus { color: #1f91f2; }

#Recruit .section-head h2 { color: #1f91f2; }
#Recruit .section-head .intro { color: #57606B; }

.Recruit-wrapper { margin-top: 60px; }
.Recruit-wrapper .col {
   width: 50%;
   margin-bottom: 25px;
}
.Recruit-wrapper h2 {
	font-size: 16px;
	line-height: 150%;
	font-weight: bold;
	letter-spacing: 1.5px;
	color: #1f91f2;
	margin-bottom: 12px;
}
.Recruit-wrapper p {
   font-size: 14px;
   line-height: 180%;
   color: #4E565F;
}
.Recruit-wrapper span {
	color: #F00;
}
.Recruit-wrapper .recruit {
	padding: 15px 15px 0 15px;
	border: 1px #333 solid;
	overflow: hidden;
}
.Recruit-wrapper .recruit h3 {
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1.5px;
}
.Recruit-wrapper .recruit ul li {
	width: 97%;
	float: right;
	text-indent: -1em;
	font-size: 14px;
	line-height: 150%;
	color: #4E565F;
}


/* ================================================================== */

/* h. Access

/* ================================================================== */

#Access {
	background-color: #fff;
	padding-top: 120px;
	color: #4E565F;
}

#Access a, #Access a:visited  { color: #C4C4C4; }
#Access a:hover, #Access a:focus { color: #1f91f2; }

#Access .section-head h2 { color: #1f91f2; }
#Access .section-head .intro { color: #57606B; }

.Access-wrapper { margin-top: 60px; }

.Access-wrapper .col {
   width: 100%;
}
.Access-wrapper h2 {
	float: left;
	font-size: 16px;
	line-height: 150%;
	font-weight: bold;
	letter-spacing: 1.5px;
	color: #1f91f2;
	margin-bottom: 12px;
}
.Access-wrapper p.add {
	padding: 3px 0 0 100px;
   font-size: 14px;
   line-height: 160%;
   color: #666;
}
.Access-wrapper p {
   font-size: 14px;
   line-height: 180%;
   color: #666;
}


#map iframe {
   display: block;
   height: 486px;
   width: 100%;
   background-color: #F6F4EF;
}



/* ================================================================== */

/* i. Voice

/* ================================================================== */

#Voice {
   padding-top: 140px;
   padding-bottom: 120px;
   color: #4E565F;
   background-color: #FFF;
   /*background-color: #e8e7e7;*/
}

#Voice a, #Concept a:visited  { color: #1f91f2; }
#Voice a:hover, #Concept a:focus { color: #094476; }

#Voice .section-head h2 { color: #1f91f2; }
#Voice .section-head .intro { color: #57606B; }

.Voice-wrapper { margin-top: 60px; }

.Voice-wrapper .col {
   width: 100%;
}
.Voice-wrapper h3 {
	font-size: 16px;
	line-height: 150%;
	font-weight: bold;
	letter-spacing: 1.5px;
	color: #1f91f2;
	margin-bottom: 12px;
}
.Voice-wrapper p {
   font-size: 14px;
   line-height: 180%;
   color: #666;
}
.Voice-wrapper p img {
	margin: 0 0 10px 20px;
	float: right;
}

#Voice .text {
	margin: 30px 0 0 0;
}



/* ================================================================== */

/* j. footer

/* ================================================================== */

footer {
	padding-top: 30px;
   padding-bottom: 30px;
   color: #303030;
   font-size: 14px;
   text-align: center;
   background-color: #DFDFDF;
}
footer a, footer a:visited { color: #0B686B; }
footer a:hover, footer a:focus { color: #fff; }

/* copyright */
footer .copyright {
    margin: 0;
    padding: 0;
 }
footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 24px;
}
.ie footer .copyright li {
   display: inline;
}

footer .copyright li:before {
    content: "|";
    padding-left: 10px;
    padding-right: 10px;
    color: #095153;
}
footer .copyright  li:first-child:before {
    display: none;
}



/* ================================================================== */

/* k. Media Queries

/* ================================================================== */


/* small screens
--------------------------------------------------------------------- */
@media only screen and (max-width: 836px) {

   /* adjust sections padding top */
   #Concept, #About,
   #Access, #Recruit { padding-top: 120px; }

   /* adjust font size */
   .intro, .testimonies .client-cite { font-size: 18px; }


   /* Concept section
   -------------------------------------------------------------------- */
   #Concept .Concept-head .col { width: 100%; }
   #Concept .Concept-wrapper { margin-top: 12px; }
   #Concept .Concept-wrapper .col { width: 50%; }
   #Concept .Concept-wrapper .col { margin-bottom: 0; }

   /* left clearing */
   .first { clear: none; }
   .m-first { clear: left; }

}



/* mobile wide
---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {

   /* center align some text */
   .section-head, .intro, #about h3,
   #Concept .entry-header {
      text-align: center;
   }
   
    
#Main {
   /*background: #e8e7e7 url(../images/intro-bg.jpg) no-repeat center;*/
   background-color: #e8e7e7;
   overflow: hidden;
   height: 380px;
   position: relative;
}



   /* mobile navigation
   -------------------------------------------------------------------- */

   header.mobile { height: 50px; }
   header.mobile .logo a {
	   top: 16px;
	   left: 0;
	   }

   .mobile #nav-wrap {
      position: absolute;
      top: 0;
      right: 20px;
      width: auto;
      margin: 0;
   }
   .mobile #nav-wrap > a {
	   width: 34px;
		height: 34px;
		text-align: left;
		background-color: #1f91f2;
		position: relative;
      border: none;
      float: right;

      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      }

	.mobile #nav-wrap > a:before,
   .mobile #nav-wrap > a:after {
	   position: absolute;
		border: 1px solid #fff;
		top: 35%;
		left: 25%;
		right: 25%;
		content: '';
	}
   .mobile #nav-wrap > a:after { top: 60%; }

   /* toggle buttons */
	.mobile #nav-wrap:not( :target ) > a:first-of-type,
	.mobile #nav-wrap:target > a:last-of-type  {
	   display: block;
	}

   /* hide menu panel */
   .mobile #nav-wrap ul#nav {
      height: auto;
		display: none;
      clear: both;
   }
   .mobile #nav-wrap ul#nav li {
      display: block;
      width: 100%;
      height: 100%;
      text-align: left;
   }
   .mobile #nav-wrap ul#nav > li.active a {
      color: #1f91f2 !important;
      background: none;
   }

   /* display menu panels */
	.mobile #nav-wrap:target > ul#nav	{
	   display: block;
      padding: 12px 25px 24px 25px;
      background: #000;
	  opacity: 0.8;
      margin: 0;
      clear: both;
   }
   .mobile #nav-wrap ul#nav li { border-bottom: 1px dotted #595B6A; }
   .mobile #nav-wrap ul#nav li a {
      margin: 0;
      padding: 0;
      font-size: 13px;
      margin: 10px 0;
      line-height: 14px;
      border: none;
   }


   /* footer
   ------------------------------------------------------------------------ */
   footer .copyright li:before { content: none; }
   footer .copyright li { margin-right: 10px; }
   footer .copyright, footer .social-links {
      text-align: center;
      float: none;
   }
   footer .social-links { margin-top: 12px; }

}


/* mobile narrow
  -------------------------------------------------------------------------- */

@media only screen and (max-width: 460px) {
	
	header .logo {
   position: relative;
   width: 190px;
   float: left;
}

header .logo a {
   display: block;
   padding: 0;
   margin: 0;
   width: 190px;
   line-height: 18px;
   position: absolute;
   left: 0;
   top: 17px;
}

#Main {
   /*background: #e8e7e7 url(../images/intro-bg.jpg) no-repeat center;*/
   background-color: #fff;
   overflow: hidden;
   position: relative;
}
	h2 img {
		width: 100%;
		margin-bottom: 5px;
	}
	
	.intro { font: 12px/1px montserrat-regular, sans-serif;
letter-spacing: 1.5px;
margin: -10px 0 40px 0;}

	.copy {
   text-align: center;
   padding: 0 10%;
   position: absolute;
   top: 50%;
}

.Concept-wrapper .col {
   width: 50%;
   margin-top: 30px;
   margin-bottom: 15px;
}
	
	footer {
		padding-top: 30px;
		padding-bottom: 30px;
		color: #303030;
		font-size: 12px;
		background-color: #fff;
}




}