/**
 * @file
 * Positioning for a responsive layout.
 *
 * Define CSS classes to create a fluid grid layout with optional sidebars
 * depending on whether blocks are placed in the left or right sidebars.
 *
 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
 */

/**
 * Center the page.
 *
 * For screen sizes larger than 1200px, prevent excessively long lines of text
 * by setting a max-width.
 */
#header,
#page,
.region-bottom {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

/* Apply the shared properties of grid items in a single, efficient ruleset. */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
.region-sidebar-third,
#footer {
  padding-left: 10px;
  padding-right: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  *behavior: url("/path/to/boxsizing.htc");
  _display: inline;
  _overflow: hidden;
  _overflow-y: visible;
}

/* Containers for grid items and flow items. */
#header,
#main,
#footer {
  *position: relative;
  *zoom: 1;
}
#header:before,
#header:after,
#main:before,
#main:after,
#footer:before,
#footer:after {
  content: "";
  display: table;
}
#header:after,
#main:after,
#footer:after {
  clear: both;
}

/* Navigation bar */
@media all and (min-width: 480px) {
  #main {
    /* Move all the children of #main down to make room. */
    padding-top: 3em;
    position: relative;
  }
  #navigation {
    /* Move the navbar up inside #main's padding. */
    position: absolute;
    top: 0;
    height: 3em;
    width: 100%;
  }
}

/**
 * Use 3 grid columns for smaller screens.
 */
@media all and (min-width: 480px) and (max-width: 959px) {

  /**
   * The layout when there is only one sidebar, the left one.
   */

  /* Span 2 columns, starting in 2nd column from left. */
  .sidebar-first #content {
    float: left;
    width: 66.66667%;
    margin-left: 33.33333%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .sidebar-first .region-sidebar-first {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */

  /* Span 2 columns, starting in 1st column from left. */
  .sidebar-second #content {
    float: left;
    width: 66.66667%;
    margin-left: 0%;
    margin-right: -66.66667%;
  }

  /* Span 1 column, starting in 3rd column from left. */
  .sidebar-second .region-sidebar-second {
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    margin-right: -100%;
  }

  /**
   * The layout when there are two sidebars.
   */

  /* Span 2 columns, starting in 2nd column from left. */
  .two-sidebars #content {
    float: left;
    width: 66.66667%;
    margin-left: 33.33333%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .two-sidebars .region-sidebar-first {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
  }

  /* Start a new row and span all 3 columns. */
  .two-sidebars .region-sidebar-second {
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 0;
    padding-right: 0;
    clear: left;
  }

  /* Apply the shared properties of grid items in a single, efficient ruleset. */
  .two-sidebars .region-sidebar-second .block {
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    *behavior: url("/path/to/boxsizing.htc");
    _display: inline;
    _overflow: hidden;
    _overflow-y: visible;
  }

  /* Span 1 column, starting in the 1st column from left. */
  .two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -33.33333%;
    clear: left;
  }

  /* Span 1 column, starting in the 2nd column from left. */
  .two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
    float: left;
    width: 33.33333%;
    margin-left: 33.33333%;
    margin-right: -66.66667%;
  }

  /* Span 1 column, starting in the 3rd column from left. */
  .two-sidebars .region-sidebar-second .block:nth-child(3n) {
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    margin-right: -100%;
  }
}

/**
 * Use 5 grid columns for larger screens.
 */
@media all and (min-width: 960px) {

  /**
   * The layout when there is only one sidebar, the left one.
   */

  /* Span 4 columns, starting in 2nd column from left. */
  .sidebar-first #content {
    float: left;
    width: 80%;
    margin-left: 20%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .sidebar-first .region-sidebar-first {
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */

  /* Span 4 columns, starting in 1st column from left. */
  .sidebar-second #content {
    float: left;
    width: 80%;
    margin-left: 0%;
    margin-right: -80%;
  }

  /* Span 1 column, starting in 5th column from left. */
  .sidebar-second .region-sidebar-second {
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }

  /**
   * The layout when there are two sidebars.
   */

  /* Span 3 columns, starting in 2nd column from left. */
  .two-sidebars #content {
    float: left;
    width: 60%;
    margin-left: 20%;
    margin-right: -80%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .two-sidebars .region-sidebar-first {
    float: left;
    width: 20%;
    margin-left: 0%;
    margin-right: -20%;
  }

  /* Span 1 column, starting in 5th column from left. */
  .two-sidebars .region-sidebar-second {
    float: left;
    width: 20%;
    margin-left: 80%;
    margin-right: -100%;
  }
}

/* cust */
/**
 * Use 2 grid columns for smaller screens. (For only Second-sidebar + Third-sidebar)
 */
@media all and (min-width: 480px) and (max-width: 959px) {
  /**
   * The layout when there are two sidebars. (Second sidebar + Third sidebar)
   */

  /* Span 2 columns, starting in 2nd column from left. */
  .third-sidebar #content {
    width: 100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .third-sidebar .region-sidebar-second {
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -100%;
    clear: left;
  }

  /* Span 1 column, starting in the 2st column from left. */
  .third-sidebar .region-sidebar-third {
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -50%;
  }
}
/**
 * Use 4 grid columns for larger screens.
 */
@media all and (min-width: 960px) {

  /**
   * The layout when there is only one sidebar, the left one.
   */

  /* Span 3 columns, starting in 2nd column from left. */
  .sidebar-first #content {
    float: left;
    width: 75%;
    margin-left: 25%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .sidebar-first .region-sidebar-first {
    float: left;
    width: 25%;
    margin-left: 0%;
    margin-right: -25%;
  }

  /**
   * The layout when there is only one sidebar, the right one.
   */

  /* Span 3 columns, starting in 1st column from left. */
  .sidebar-second #content {
    float: left;
    width: 75%;
    margin-left: 0%;
    margin-right: -75%;
  }

  /* Span 1 column, starting in 4th column from left. */
  .sidebar-second .region-sidebar-second {
    float: left;
    width: 25%;
    margin-left: 75%;
    margin-right: -100%;
  }

  /**
   * The layout when there are two sidebars. (First sidebar + Second sidebar)
   */

  /* Span 2 columns, starting in 2nd column from left. */
  .two-sidebars #content {
    float: left;
    width: 50%;
    margin-left: 25%;
    margin-right: -75%;
  }

  /* Span 1 column, starting in 1st column from left. */
  .two-sidebars .region-sidebar-first {
    float: left;
    width: 25%;
    margin-left: 0%;
    margin-right: -25%;
  }

  /* Span 1 column, starting in 5th column from left. */
  .two-sidebars .region-sidebar-second {
    float: left;
    width: 25%;
    margin-left: 75%;
    margin-right: -100%;
  }
  
  /**
   * The layout when there are two sidebars (Second sidebar + Third sidebar).
   */

  /* Span 2 columns, starting in 1nd column from left. */
  .third-sidebar #content {
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -100%;
  }

  /* Span 1 column, starting in 3st column from left. */
  .third-sidebar .region-sidebar-second {
    float: left;
    width: 25%;
    margin-left: 50%;
    margin-right: -75%;
  }

  /* Span 1 column, starting in 5th column from left. */
  .third-sidebar .region-sidebar-third {
    float: left;
    width: 25%;
    margin-left: 75%;
    margin-right: -100%;
  }
}
#main {
  margin-top: 20px;
}
#header,
#page,
.region-bottom {
  max-width: 1200px;
}
@media all and (max-width: 480px) {
  .waves-title {
    display: none;
  }
  #navigation {
    position: relative;
    padding: 0;
  }
  .hero-block .block-body {
    position: relative;
    padding: 1em 1em 3em 1em;
  }
  .hero-block .block-body a{
    position: absolute;
    left: 10px;
    bottom:0px;
  }
  .hero-block .block-body a.btn{
    padding: 6px;
  }
}
@media all and (min-width: 480px) and (max-width: 959px) {
  .waves-title {
    display: none;
  }
  #header {
    padding-bottom: 15px;
  }
  #banner {
    margin-top: -15px;
  }
  #navigation {
    font-size: 0.8em;
    position: relative;
    padding: 0;
  }
  .hero-block .block-body {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 85%;
    padding: 1em 1em 4.5em 1em;
  }
  .hero-block .block-body a{
    position: absolute;
    right: 6px;
    bottom: 6px;
  }
  .hero-block .block-body a.btn{
    padding: 6px;
  }
}
@media all and (min-width: 960px) {
  #header, #content_top, #main, #footer, .region-bottom {
    /* border-bottom: 1px solid red; */
    padding: 0 15px;
  }
  #header {
    padding-bottom: 15px;
  }
  #banner {
    margin-top: -15px;
  }
  .front #content_top {
    padding: 0;
  }
  #content {
    padding: 0;
  }
  #logo {
    float: left;
    width: 14%;
  }
  .waves-title {
    display: block;
  }
  #header-content {
    float: left;
    width: 85%;
    height: 120px;
    position: relative;
    padding-top: 15px;
  }
  #navigation {
    font-size: 0.9em;
    padding: 0;
    position: absolute;
    top: initial;
    top: calc(100% - 3em); /* 100% minus line-height of #navigation #main-menu li a*/
    bottom: 0;
  }
  .kc-template  #navigation {
    padding-top: 14px;
  }
  .hero-block .block-body {
    position: absolute;
    top: 50px;
    left: 95px;
    width: 36%;
    padding: 1em 1em 3em 1em;
  }
  .hero-block .block-body a{
    position: absolute;
    right: 6px;
    bottom: 6px;
  }
  .hero-block .block-body a.btn{
    padding: 6px;
  }
  .kc-search-block {
    border-bottom: 1px solid #CCC;
  }
  #footer {
    margin-top: 20px;
  }
  .footer-mission, .footer-twitter, .footer-menu {
    float: left;
  }
  .footer-mission, .footer-menu {
    width: 45%;
  }
  .footer-twitter {
    width: 50%;
  }
  .footer-menu, .footer-twitter {
    padding-left: 20px;
  }
  .kc-page .footer-mission, .kc-page .footer-menu {
    width: 50%;
  }
}
#header {
  padding-top: 20px;
  /* -webkit-box-shadow: 0px 1px 5px #ccc;
  -moz-box-shadow: 0px 1px 5px #ccc;
  box-shadow: 0px 1px 5px #ccc; */
}
#banner {
  /* background: url(../../images/line-shadow-pixel.png) repeat-x top left; */
  background: url(../../images/shadow-line.png) repeat-x top left;
  min-height: 4px;
}
#banner .block {
  margin: 0;
}
#banner img {
  width: 100%;
}
#footer > div {
  box-sizing:border-box;
}
#header-search {
  float: right;
}
#header-search .region {
  line-height:1.5em;
}
.hero-block {
  position: relative;   
}
#bottom-wrapper {
  background-color: #484542;
  color: #FFFFFF;
  overflow: hidden;
}
.region-bottom {
  box-sizing: border-box;
  overflow: hidden;
}
.footer-mission {
  color: rgb(207, 207, 207);
}
.footer-mission:before {
  content: "\00a0";
  background: url("../../images/kc-logo.png") no-repeat scroll 5px / 50px auto #ffffff;
  display: block;
  position: absolute; 
  width: 60px;
  height: 70px;
  -moz-border-radius: 0 0 45px 45px;
  -webkit-border-radius: 10px;
  border-radius: 0 0 45px 45px;
  -khtml-border-radius: 0 0 45px 45px;
}
.footer-mission > p {
  padding-top: 70px;
}
.footer-mission > p {
  padding-left: 75px;
  padding-top: 0;
}

/** Apply only Desktop browser **/
@media screen and (min-width:1025px)
{
    /* Styles */
	.view-home-page-blocks .pinned-item .title, .view-knowledge-center .pinned-item .title{
		min-height:60px;
	}
}
.node-type-page aside.sidebars ul{
  	padding-left:0px;
}
.node-type-page aside.sidebars ul li{
  	list-style:none;
	padding-bottom:10px;
}
.node-type-page aside.sidebars ul li a{
  	  color: #104A82;
  font-size: 14px;
  font-family: "Montserrat";
  font-weight: normal;
  text-decoration: none;
}