/*==============================================================================
   This section is in own file so that when nav component loads, it also loads this style sheet
     in order to make sure that this css gets applied, the nav is dependent on this css
==============================================================================*/
/* link in text */
.link{
    color: rgba(135, 135, 208, 1);
    cursor: pointer;
    -webkit-transition: all .25s cubic-bezier(.23,1,.32,1) 0s;
    transition: all .25s cubic-bezier(.23,1,.32,1) 0s;
    white-space:nowrap
}
.link:hover:not(.dead):not(.current),
.link:focus:not(.dead):not(.current),
.link:active:not(.dead):not(.current){
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(top,#efd100,#e2a233 19%,#f0c328 30%,#fff1a3 43%,#ffe13e 50%,#FFE359 51%,#FFEB87);
    background-size: 1em 2.5em;
    color: #f8b700;
    display: inline-block;
    position: relative;
    z-index: auto;
    background-position: center 0;
}

/* link in text : title */
.col-inline-blocks div .link{
    line-height: 1.65;
    margin-bottom: 0px;
    margin-left: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: rgba(135, 135, 208, 1);
    opacity: 1;
    white-space: nowrap;
}

/* link : dead */
.col-inline-blocks div .link.dead,
.link.current,
.link.dead{
    color: hsl(46deg 7% 60%);
    cursor: text;
    text-decoration: none;
}

/* Note: for now dead links in text look like normal text
.link.dead,
*/
.col-inline-blocks div .link.dead{
   opacity: .9;
   cursor: default;
   color: rgb(126 122 109);
}

/* link : current */
.link.current{
    color: hsl(46deg 15.59% 76.85%);
}
.my-breadcrumb ul > li:last-child a,
.col-inline-blocks div .link.current{
   font-weight: 400;
   color: #b6b4a1; /* from .9 on background with #c4c2ae */
}


/*------------------------------------------------------------------------------
   column inline blocks
------------------------------------------------------------------------------*/
/* inline block for when screen is small */
.col-inline-blocks > div{
   margin-bottom: 20px;
}
/* only below this size */
@media (max-width: 1059px) {
   .col-inline-blocks{
      width: 100%;
      width: -webkit-calc(100% + 30px);
      width: -moz-calc(100% + 30px);
      width: calc(100% + 30px);
   }
   .col-inline-blocks > div{
      display: inline-block;
      vertical-align: top;
      margin-right: 30px;
   }
}


/*------------------------------------------------------------------------------
   side nav, top nav, main shift
------------------------------------------------------------------------------*/
/* nav far side */
.nav-side{
   max-width: 200px;
   margin-left: -220px;
   float: left;
   left: calc(50% - 328px); /* doesn't hurt normal behaviour, but when nav doesnt load properly this make sure it is in correct position
                                this makes sure the nav is visible, but the page length will still not respect it's height, 
                                causing a a possible overlap issue with the footer*/
}

.nav-side,
.nav-top,
.nav-top-hr{
   display: none;
}

.nav-top-hr{
   border-top: 1px dashed rgba(0,0,0,.25);
   margin-bottom: 20px;
   margin-left: -80px;
   width: 150%;
}

/* only below this size */
@media (max-width: 1059px) {
   .nav-top-hr,
   .nav-top{
      display: block;
   }
}
/* only aboves these sizes */
@media (min-width: 1060px) {
   .nav-side{
      display: block;
   }
   .navbar-inner{
      max-width: 1570px;
   }
   .page-footer .wrapper {
      max-width: 1265px;
   }
   body:not(.noNav) .main{
      margin-left: 22%;
   }
}
@media (min-width: 1380px) {
   body:not(.noNav) .main{
      margin-left: 26%;
   }
}
@media (min-width: 1580px) {
   body:not(.noNav) .main{
      margin-left: 28%;
   }
}
@media (min-width: 1750px) {
   body:not(.noNav) .main{
      margin-left: 30%;
   }
}

@media (min-width: 2560px){
   body:not(.noNav) .main{
      margin-left: 36%;
   }
}