/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-sans-pro-v11-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
       url('../fonts/source-sans-pro-v11-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-sans-pro-v11-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('../fonts/source-sans-pro-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/source-sans-pro-v11-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
       url('../fonts/source-sans-pro-v11-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v11-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v11-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v11-latin-600italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello.eot?23103263');
  src: url('../fonts/fontello.eot?23103263#iefix') format('embedded-opentype'),
       url('../fonts/fontello.woff2?23103263') format('woff2'),
       url('../fonts/fontello.woff?23103263') format('woff'),
       url('../fonts/fontello.ttf?23103263') format('truetype'),
       url('../fonts/fontello.svg?23103263#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?23103263#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-left-dir:before { content: '\e800'; } /* '' */
.icon-right-dir:before { content: '\e801'; } /* '' */
.icon-plus-circled:before { content: '\e802'; } /* '' */
.icon-trash-empty:before { content: '\e803'; } /* '' */
.icon-download:before { content: '\e804'; } /* '' */
.icon-ok-circled:before { content: '\e805'; } /* '' */


html,
body {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.2em;
    line-height: 1.4;
    /*color: #383b42;*/
    color:#003045;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
/* General */
button {
    cursor: pointer;
}
button[disabled] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
/* Header section (where the logo is) */
.header {
    background-color: #fff;
    max-width: 800px;
    margin: 0 auto;
}
/* Introductory text */
.intro {
    background-color: #062936; 
    overflow: auto;
    position: relative;
}
.intro::before {
    background: url("../images/dots.png") top left #062936;
    opacity:.4;
    content:'';
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.introInner {   
    position: relative;
    max-width: 800px;
    margin: 5rem auto;
    padding: 3rem;
    padding-top:1.5rem;
    padding-left: 5rem;
    background-color: #062936;
}
h1 {
    color: #F8DD5D;
    font-weight: normal;
    line-height:1.2;
    font-size: 2.1em;
}
.intro p, .intro li {
    color: white;
    max-width: 35em;
    font-size: 1.1em;
    line-height: 1.4;
}
.intro li {
    margin:.5em 0;
}
/* Briefcase part of the page */
.briefcase-section {
    background: url("../images/dots.png") top left #30B3AD;
    padding-bottom: 15%;
}
#hand,
#briefcase-bottom {
    max-width: 1140px;
    margin: 0 auto;
}
#hand img, #briefcase-bottom img {
    display:block;
    width: 100%;
    height:auto;
    margin-bottom: -1px; /* SVG doesn't go all the way to the bottom for some reason */
}
#briefcase {
    max-width: 1190px;
    margin: 0 auto;
}
#briefcaseInner {
    background-color: #383B42;
    border-radius: 30px;
    border-radius: 2.6% auto;
    border: solid 5px #585C65;
    position: relative;
    margin: 0 20px; /* For smaller screens */
    min-height:850px;
}
/* Actual content inside the briefcase */
.js #content {
    /* magic numbers */
    padding-top: 6%;
    /*padding-left: 25.8%;
    padding-right: 3.1%;*/
    padding-left: 2.2%;
    padding-right: 2.2%;
}
.content-section {
    background-color: white;
    padding: 7%;
    position: relative;
    margin:3%;
}
.content-section > h2:first-child {
    margin-top:0;
}
.content-section::before {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    top: 0;
    height: 8px;
    background: #F8DD5D;
}
.js .content-section {
    /*overflow:hidden;
    height:auto;
    max-height:0;*/
    padding: 0 7%;
    margin: 0 3%;
    padding-left: 15%;
    padding-right: 10%;
    overflow:auto;
    display:none;
}
.js .content-section > div {
    margin: 15% 0;
}
.js .content-section.uncollapsed {
    /*max-height:3000px; */
    display:block;
}
/*.js .anim {
    transition:all .2s ease-out; 
    transition-delay: .3s;
}*/
.content-section a:not(.resource-tile), .introInner a {
    color: #2072CC;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 0.0625rem solid #dcdcdc;
}
.introInner a {
    color:white;
    border-bottom: 0.0625rem solid #475f68;
}
.introInner a:hover, .introInner a:focus {
    background-color: #093b4e;
    border-color: white
}
.content-section a[href^="#"] {
    color:black;
    background-color: transparent;
}
.content-section a:not(.resource-tile):hover,.content-section a:not(.resource-tile):focus {
    /*text-decoration: underline*/
    border-bottom-color: #a0caf9;
    background-color: #f0f7ff;
}
.content-section li {
    margin: .4em 0;
    line-height: 1.3;
}
h2,
.resources {
    color:#2D9893;
    font-size: 2em;
    line-height: 1.05;
    font-weight: normal;
    letter-spacing: -1px;
}
h3 {
    color: #062936;
    font-weight: normal;
    font-size: 1.45em;
    margin-bottom:.7em;
    line-height: 1.2;
}
h4 {
    color: #062936;
    font-weight: normal;
    font-style: italic;
    font-size: 1.25em;
    margin-bottom:.7em;
    line-height: 1.2;
}
/* Resources tiles */
ul.resources-list {
    list-style: none;
    margin:0;
    padding:0;
}
.resources-list li {
    position: relative;
}
.saveBtn {
    background-color: transparent;
    border: none;
    font-size: 1.5em;
    color:#2D9893;
    width:10%;
}
.saveBtn:hover {
    color:#333;
}
.resource-tile {
    display:inline-block;
    width: 80%;
    max-width: 30em;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, .25);
    background: url(../images/icon-book.svg) no-repeat left 8px center;
    margin: 0 0 .5em;
    border-left: solid 6px #F8DD5D;
    border-top: solid 1px #f2f2f2;
    min-height: 80px;
    background-size: 80px 80px;
}
.resource-tile span {
    display:inline-block;
    vertical-align: middle;
    margin:25px;
    margin-left: 100px;
    color: #4C4C4D;
    font-size: 95%;
    line-height: 1.1;
    font-weight: bold;
}
.resource-tile span::before {
    content: 'Resource';
    text-transform: uppercase;
    display:block;
    font-size: .6em;
    margin-bottom: .3em;
}
.resource-tile.web {
    background-image: url(../images/icon-web.svg);
}
.resource-tile.web span::before {
    content: 'Web content';
}
.resource-tile.tool {
    background-image: url(../images/icon-tool.svg);
}
.resource-tile.tool span::before {
    content: 'Tool';
}
.resource-tile:hover,.resource-tile:focus {
    /*background-color: #f3f1e5*/
    background-color: #eee;
}
.navbtn-holder {
    background-color: white;
    margin: 0 3% 3em;
    opacity:0;
    padding:1em;
}
.navbtn-holder.show {
    opacity:1;
}
.navbtn {
    background-color: #F8DD5D;
    font-size: 1em;
    text-transform: uppercase;
    font-family: 'Source Sans Pro', sans-serif;
    padding: .5em 1em;
    border: none;
    font-weight: 600;
}

/*#backToMenu .fontello {
    margin-right: .2em;
}*/
#nextBtn, #prevBtn {
    float:right;
}
#prevBtn {
    margin-right:.5em;
}

/* Tiles */
.scalio {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
}
.half-scalio {
    -webkit-transform: scale(.5,.55) translateY(-5px) translateX(2vw);
    -ms-transform: scale(.5,.55) translateY(-5px) translateX(2vw);
    transform: scale(.5,.55) translateY(-5px) translateX(2vw);
    transform-origin: left top;
    background-position-y: 55% !important;
    border-radius: 0 0 20px 20px;
    /*padding-top:23%;*/
}
.half-scalio span {
    display:none;
}
#tilesContainer {
    position: absolute;
    top:0;
    left:0;
    right:0;
}
#tilesContainerInner {
    position: absolute;
    top:3em;
    left:5%;
    right:1%;
}
.tile {
    font-family: 'Source Sans Pro', sans-serif;
    border: none;
    /*width: 17.55%;*/
    width:21%;
    /*height: 200px; Set height through JS now. */
    /*margin: 2.6%;*/
    background-color: #30B3AD;
    position: relative;
    background: url(../images/tile1.svg) top 25% center no-repeat #30B3AD;
    background-size: 55% ;
    
    color: #383b42;
    font-weight: 600;

    position: absolute;
    top:0;
    left:0;
}
.tile-row-3 {
    width: 30%;
}
.tile-transition {
    transition: all .2s;
}
.tile:nth-child(2) {
    background-image: url(../images/tile2.svg);
}
.tile:nth-child(3) {
    background-image: url(../images/tile3.svg);
}
.tile:nth-child(4) {
    background-image: url(../images/tile4.svg);
}
.tile:nth-child(5) {
    background-image: url(../images/tile5.svg);
}
.tile:nth-child(6) {
    background-image: url(../images/tile6.svg);
}
.tile:nth-child(7) {
    background-image: url(../images/tile7.svg);
    background-size: 80%
}
.tile:nth-child(8) {
    background-image: url(../images/tile8.svg);
}
.tile:nth-child(9) {
    background-image: url(../images/tile9.svg);
}
.tile:nth-child(10) {
    background-image: url(../images/tile10.svg);
}
.tile:nth-child(11) {
    background-image: url(../images/tile11.svg);
}
.tile:nth-child(12) {
    background-image: url(../images/tile12.svg);
}

.tile:not(.selected):not(.scalio):hover,
.tile:not(.selected):not(.scalio):focus {
    -webkit-box-shadow: 0px 5px 12px  rgba(0,0,0,.5);
    -moz-box-shadow: 0px 5px 12px  rgba(0,0,0,.5);
    box-shadow: 0px 5px 12px  rgba(0,0,0,.5);
    transform: translateY(-3%);
    background-color: #47d4cd;
}

.tile::before {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    top: 0;
    height: 8px;
    background: #F8DD5D;
}

.tile span {
    position: absolute;
    top: 68%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 1.2rem;
    padding: .5rem;
    line-height: 1;
    letter-spacing: -1px;
}

/*.selected {
    pointer-events: none;
}*/

.scalio {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

/* Footer */
.footer {
     background-color: #062936;
     width:100%;
     color: rgba(255,255,255,.7);
     overflow: auto;
}
.footer .footerInner {
    max-width:900px;
    width: 80%;
    margin: 5em auto;
}
.footerInner div:first-child {
    float:left;
    max-width:800px;
    width:70%;
    padding-right: 5%;
    padding-bottom:4em;
}
.footerLinks {
    /*max-width:100px;*/
    width: 25%;
    float:left;
}
.footerInner ul {
    margin-top: 0;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}
.footerInner a {
    color:rgba(255,255,255,.7);
    text-decoration: none;
}
.footerInner a:hover, .footerInner a:focus {
    color:rgba(255,255,255,1);
    text-decoration: underline;
}




.mysaved {
    position: fixed;
    z-index: 99;
}
#savedListToggle {
    position: fixed;
    right: 1rem;
    top: -3px;
    background: #f8dd5d;
    color:inherit;
    border: none;
    border-radius: 0 0 10px 10px;
    padding: .7em 1.5em .5em;
    font-family: "Source Sans Pro";
    font-size: .9rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: all .3s;
    border: solid 2px transparent;
}
#savedListToggle:hover , #savedListToggle:focus{
    background-color: #ffea85;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, .5);
}
@keyframes bulge {
    50% { transform: scale(1.08); }
}
.omnom {
    animation: bulge .15s linear;
    -webkit-animation: bulge .15s linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}
@keyframes flash {
    40% { background-color: #ffea85 }
    60% { background-color: #ffea85 }
}
.flashbg {
    animation: flash .5s ease-out;
    -webkit-animation: flash .5s ease-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}
#savedList {
    font-size: .9em;
    padding: 0 1em;
    line-height: 1.2;
    display: none;
    width: 300px;
    background-color: #dddddd;
    position: fixed;
    right: 1rem;
    top: 45px;
    /* border-radius: 10px; */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, .25);
}
#savedList {
    overflow-y:auto;
    max-height:91vh;
}
#savedList::-webkit-scrollbar-track
{ 
  background-color: #dddddd;
}

#savedList::-webkit-scrollbar
{
  width: 6px;
  background-color: #dddddd;
}

#savedList::-webkit-scrollbar-thumb
{
  background-color: #ccc;
}
/* #savedList::before {
    content:'';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ddd transparent;

    top: -10px;
    right: 62px;
    position: absolute;
} */

#savedList table {
    text-align: left;
    margin: 1rem 0;
}
#savedList table {
    border-collapse: collapse;
    font-size: 90%;
    width: 100%
}
#savedList th,#savedList td {
    padding:.4em;
    border-bottom:solid 1px #aaa

}
#savedList th {
    font-size:80%;
    text-transform:uppercase;
    background-color: #d0d0d0;
    border-top: solid 1px #aaa
}
#savedList td a {
    color: inherit;
    text-decoration: none;
    font-weight: normal;
    display: block;
}
#savedList td a:hover, #savedList td a:focus {
    text-decoration: underline;
}
#savedList td:last-child,#savedList th:last-child  {
    text-align:center;
}
/* Download button */
#savedList td:last-child a {
    color: #2072cc;
    padding: .25em .3em .1em;
    border-radius: 2px;
}
#savedList td:last-child a:hover,#savedList td:last-child a:focus {
    background: #bfdeff;
}

.removeResource {
    background: transparent;
    border: none;
    color: #de300c;
    border-radius: 2px;
    padding: .3em .5em;
    text-align: center;
}
.removeResource:hover, .removeResource:focus {
    background-color: #f1b9b5;
    color: red;
}



/* Media queries */
@media screen and (max-width: 767px) {
    .tile:not(.selected):not(.scalio):hover, .tile:not(.selected):not(.scalio):focus {
        transform: none;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 1.25em;
        line-height: 1.3;
    }
    h2, .resources {
        font-size:1.7em;
    }
    .js .content-section {
        padding: 0 7%;
        margin: 0;
        padding-left: 6%;
        padding-right: 5%;
    }
    .navbtn-holder {
        margin-left:0;
        margin-right:0;
    }
    .js #content {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1190px) {
    .tile span {
        font-size: 1.6vw;
    }
}
@media screen and (max-width: 767px) {
    /* Make tiles into lines */
    .tile {
        position: relative;
        width: calc(100% - 2em);
        float: left !important;
        left: auto !important;
        top: auto !important;
        margin:  .5em;
        height: auto !important;
        text-align:left;
        background-position: center /*.2rem */left .8em;
        background-size: 40px !important;
    }
    .tile-transition {
        transition: none;
    }
    .tile span {
        position: relative;
        text-align:left;
        padding: 1em;
        padding-left: 3em;
        display: block;
    }
    .tile::before {
        /*width: 4px;
        height: 100%;*/
        height: 4px;
    }
    .tile.half-scalio {
        width:25vw;
        height: 25vw !important;
        background-size: 75% !important;
        background-position: center bottom 25% !important;
        border-radius: 0 0 3vw 3vw;
        top: -5px !important;
        position: absolute;
        left: 0 !important;
        -webkit-transform: scale(.5,.55) translateY(-5px) translateX(-2vw);
        -ms-transform: scale(.5,.55) translateY(-5px) translateX(-2vw);
        transform: scale(.5,.55) translateY(-5px) translateX(-2vw);
    }
    .tile.half-scalio span {
        display:none;
    }
    /*.tile.scalio {
      visibility: hidden;

        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }*/
    .js #content {
        padding-left:0;
        padding-right:0;
    }
    .js .content-section {
        padding-left:5%;
        padding-right:5%;
        margin:0;
    }
    .resource-tile span {
        margin:1em;
    }
    .resource-tile, .resource-tile.web, .resource-tile.tool {
        width:calc(95% - 40px);
        min-height:0;
        background:white;
        border-left-width: 3px;
    }
    .saveBtn {
        width:40px;
    }
    h2, .resources {
        font-size: 1.6em;
    }
    h3 {
        font-size: 1.3em;
    }
    .js .content-section > div {
        margin-top: 20%;
    }
    .content-section::before {
        height:4px;
    }
    .navbtn-holder {
        margin-right: 0;
        margin-left:0;
    }
}
@media screen and (max-width: 500px) {
    body {
        font-size: 1em;
        line-height: 1.3;
    }
    .introInner {
        padding-left: auto;
        padding:7%;
        margin-top: 1%;
    }
    .intro p, .intro li {
        line-height: 1.3
    }
    #briefcaseInner {
        margin:0;
        border-radius:5px;
        border-width: 2px;
    }    
    .content-section {
        margin: 3% 0;
    }
    .content-section:first-child {
        margin-top:0;
    }
    .content-section:last-child {
        margin-bottom:0;
    }
    /* Footer into single column */
    .footerInner div:first-child, .footerInner div:last-child {
        float:none;
        width: auto;
    }
}

@media screen and (max-width: 1190px) {
    #tilesContainerInner {
        top: 5vw;
    }
}

@media screen and (max-width: 600px) {
    .header {
        margin-top:45px;
    }
    #savedListToggle {
        right:.5rem;
        width:calc(100% - 1rem);
        background:#fbe168
    }
    #savedList {
        width: calc(100% - 2em - 1rem);
        right:.5rem;
    }
    #savedList::before {
        right: calc(50% - 10px);
    }
    .navbtn-holder {
        font-size: .9rem;
    }
}
@media screen and (max-width: 385px) {
    .navbtn-holder {
        font-size: .75rem;
    }
}
@media screen and (max-width: 330px) {
    .header img {
        width: 95%;
    }
}
@media print {
    body,
    .intro p, .intro li {
        color: #000;
        background: #fff;
        font-size: 1em;
    }
    h1, h2, h3, h4, h5, h6, .resources {
        color:#003045;
    }
    h2, h3 {
        page-break-after: avoid;
    }
    /*ul, img {
       page-break-inside: avoid;
    }
    h2:not(:first-of-type) {
        page-break-before: always;
    }
    .js h2 {
        page-break-before: avoid;
    }*/

    .content-section a:not(.resource-tile), .introInner a {
        color:#000;
        text-decoration: none;
        border-bottom: none;
        font-weight: bolder;
    }

    a:not(.no-print)::after {
        content:" <" attr(href) ">";
        font-weight: normal;
        font-size: 90%;
        color:#999;
    }


    .introInner, #briefcase {
        max-width: 100%;
        width: 100%;
        margin:0;
        padding:0;
    }
    #savedListToggle, #hand, .navbtn-holder, #briefcase-bottom,
    .tile.selected, .intro,.saveBtn, .footer,
    .content-section::before {
        display:none;
    }

    .no-js h2, body.menu h2 {
        page-break-before: always;
    }
    .no-js .intro, body.menu .intro {
      display:block;
    }
    #briefcaseInner {
        border: none;
        border-radius: 0;
        margin:0 !important;
        padding: 0 !important;
    }
    #content {
        padding:0 !important;
        padding-top: 0 !important;
    }
    .content-section {
        padding:0 !important;
        margin:0 !important;
    }
    .content-section > div {
        margin:0 !important;
    }

    ul.resources-list {
        list-style: disc;
        margin:auto;
        padding-left:1.5em;
    }
    .resource-tile {
        display: inline;
        width: 100%;
        max-width: none;
        box-shadow: none;
        background: none;
        margin: 0;
        border-left: none;
        border-top: none;
        min-height: auto;
        background-size: auto;
        text-decoration: none;
        font-weight: bolder;
    }
    .resource-tile.web, 
    .resource-tile.tool {
        background: none;
    }
    .resource-tile span {
        display: inline;
        vertical-align: initial;
        margin: 0;
        margin-left: 0;
        color: #000;
        font-size: 1em;
        font-weight: bolder;
    }
    .resource-tile span::before {
        content: 'Resource: ';
        text-transform: none;
        display: inline;
        font-size: 1em;
    }
    .resource-tile.web span::before {
        content: 'Web content: ';
    }
    .resource-tile.tool span::before {
        content: 'Tool: ';
    }
    body.menu #tilesContainer {
      display:none;
    }
    body.menu .content-section {
      display:block !important;
    }
    @page {
        margin: 2cm 2.5cm;
    }
}