/* GENERAL ================================================================== */

body {
    font-family: 'Gothic A1', Helvetica, Arial, Verdana, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin:0px;
    height:100vh;
    line-height:100%;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
}

*, *:before, *:after { box-sizing: inherit; }
img, div { display: block; }
p, h1, h2, h3, h4, ul, li { margin:0; padding:0; }
a { color:inherit; }
ul { list-style-type: none; decoration: none; }
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: underline;
}

/* COLOURS ================================================================= */

/* brand colour */
.gn:hover {
}
.gn, .card-online {
    background:#00D67A; /* light green */
}
.green, .btn-sm:hover, a:hover {
    color:#00D67A; /* brand green */
}
.navarrow, .catnum, .card-tag-container, .dullgreen {
    color:#00BD6B; /* dull green */
}

/* base colour */
body, p, .dk {
    color:#292e34; /* dark grey */
}
.inactive, .card-author-about, .card-session, #footer {
    color:#a7a7a7 !important; /* light grey */
}
body, .img-author  {
    background-color:whitesmoke; /* v light grey */
}
.img-author {
    border:1px solid #e8e8e8; /* light grey alternate */
}

/* white */
#nav, #coverunderlay, .card-container, #cover, #footer {
    background:white; /* light */
}
.card-img-txt, .wt {
    color:white;
}
.card-online {
    border:2px solid white;
}

/* red */
.red {
    color:#FF2400;
}

/* FONTS ==================================================================== */

/* large */
h1 {
  font-size:50px;
  font-weight:900;
}
/* medium */
h2, .navarrow {
  font-size:20px;
  font-weight:600;
}
/* medium alt */
.timer, .cat-title {
  font-size:17px;
  font-weight:900;
}
/* standard */
body, h3, .h3, .card-author-name, .card-tag-container, .catnum {
  font-size:14px;
  font-weight:600;
}
/* small */
.cover-text, .btn-sm, #footer, .card-author-about, .card-session, .detail {
    font-size:12px;
    font-weight:500;
}
/* extra line height */
h1, h2 {
    line-height: 140%;
}
/* super line height */
h3, .h3, .cover-text, #footer {
    line-height: 160%;
}
.b {
    font-weight:900;
}

.card-author-about, .card-author-name {
		line-height:100%;
}

/* FLEX ========================================================= */


.flex, .flex-center, .card-outer, .flex-top, .flex-wrap, .category, .flex-justify {
	display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-center, /*.card-outer,*/ .flex-justify, .flex-wrap/*, .category*/ {
	-webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-top {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.flex-wrap, .category {
	-webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-justify {
	-webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-grow, .card-container {
	-ms-flex-preferred-size: auto;
  flex-basis: auto;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

.flex-shrink, .card-img-play, .img-author {
	-ms-flex-negative:0;
  flex-shrink:0;
}

.footer-column {
	-webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
}


/* GENERAL ================================================================== */

.underline {
		text-decoration: underline !important;
}

#wrapper {
    -webkit-overflow-scrolling: touch;
}

.autopagemargin {
  padding-right:80px;
  padding-left:80px;
}

.hide { display:none; }

.clickable, .cursor, a { cursor:pointer; }

.align-r {
  margin-left:auto;
}

.ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
}
.nowrap {
  white-space: nowrap;
}
.ellipsisTwo {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
}
.center {
    text-align:center;
}


/* NAV ====================================================================== */


#nav {
    position:relative;
    padding-top:20px;
    padding-bottom:20px;
}
.logo-wrapper {
    max-width:150px;
    min-width:100px;
    height:auto;
    margin-right:10px;
}
.logo {
    max-width:100%;
    height:auto;
}


/* COVER ==================================================================== */

#cover {
		margin-bottom:10px;
    background-size:contain;
    padding-top:40px;
    padding-bottom:80px;
}

.cover-subhead {
    margin-top:15px;
}

.cover-text {
    margin:10px 0px 0px 0px;
}

.asterix {
    margin-right:5px;
}

.btn-sm {
    /*display:block;*/
    min-width:50px;
    text-align:center;
}

.btn-lg {
  margin-top:20px;
	padding:14px 36px 13px 36px;
  border-radius:50px;
}


/* CARDS ==================================================================== */

/* content area */
.navarrow {
    width:80px;
    min-height:100px;
}
.larr {
  margin:0 auto 0 45px;
}
.rarr {
  margin:0 45px 0 auto;
}
.cat-row {
  height:100%;
}

/* section */
/*.category {
    display: flex;
    flex-flow: row wrap;
}*/
.cat-title {
    min-width:0;
    width:100%;
    padding-top:30px;
    padding-bottom:26px;
}
.catnum {
  margin-left:10px;
}
.cat-name-spacer {
  width:3px;
}
/* card container */
/*.card-outer {
  display:flex;
}*/

.card-container {
    margin:0px 2px 0px 2px;
    min-width: 0px;
    /*flex-basis: auto;
    flex-grow: 1;*/
    position:relative;
}
.autocardheight {
   height:280px;
}

/* image */

.card-img {
    margin-bottom:5px;
    width:100%;
    object-fit:cover;
    position:relative;
}
.card-img-overlay {
    position:absolute;
    bottom:0;
    width:100%;
    padding-top:20px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.card-img-play {
  width:50px;
  height:50px;
  /*flex-shrink:0;*/
  margin:16px 10px 16px 16px;
}
.card-img-txt {
  line-height:1;
  padding:5px 16px 0px 0px;
  min-width:0px;
}

/* card text content */

.card-txt-container {
    padding:10px 16px 16px 16px;
}

/* author */

.card-author-container {
    margin:0px 0px 0px 0px;
    padding:16px;
    width:100%;
    position:relative;
}
.img-author {
    width:32px;
    height:32px;
    border-radius:18px;
    /*flex-shrink:0;*/
    margin-right:10px;
    position:relative;
}
.card-author-info {
    min-width:0;
    width:100%;
}
.card-author-name {
    margin-bottom:3px;
}
.card-session {
    margin-left:auto;
}
.card-online {
    position:absolute;
    width:14px;
    height:14px;
    border-radius:7px;
    margin:0px -6px -4px 0px;
    right:0;
    bottom:0;
}

/* tags */

.card-tag-container {
  min-width:0;
  padding:2px 0px 10px 0px;
}

/* details */

.card-details-container {
  padding:10px 0px 10px 0px;
}
.detail {
  margin-right:12px;
  padding-top:1px;
}
.detail-icon {
    margin-right:14px;
    width:14px;
    height:14px;
}

/* timer */

.timer {
  min-width:0;
  display:none;
}
.show {
  display:inline-block;
}


/* FOOTER =================================================================== */


#footer {
	padding-top:60px;
	padding-bottom:30px;
  position:relative;
  margin-top:80px;
}

.footer-wrapper {
  padding:0px 3px;
}

.footer-column {
  /*-ms-flex: 1;
  flex: 1 1 0px;*/
  margin-right:60px;
  margin-bottom:40px;
}
.footer-title {
    margin-bottom:15px;
}
.footer-txt > div {
    margin-bottom:8px;
}
.footer-txt > div > i {
    width:20px;
}


/* RESPONSIVE =============================================================== */


@media only screen and (max-width: 900px) {
    .footer-wrapper {
        display:block;
    }

		/* Margin changes */
		.autopagemargin {
        padding-right:60px;
        padding-left:60px;
    }
		.navarrow {
		    width:60px;
		}
		.larr {
		    margin:0 auto 0 30px;
		}
		.rarr {
		    margin:0 30px 0 auto;
		}
}

/* SMALL screen 800px or below */
@media only screen and (max-width: 600px) {

    /* FONT CHANGES */
    /* large */
    h1 {
      font-size:35px;
    }
    /* medium */
    h2, .navarrow {
      font-size:18px;
    }
    /* medium alt */
    .timer {
      font-size:16px;
    }
    /* standard */
    body, h3, .card-author-name, .card-tag-container {
      font-size:13px;
    }
    /* small */
    .cover-text, .btn-sm, .catnum, #footer, .card-author-about, .card-session, .detail {
      font-size:13px;
    }

    /* MARGIN CHANGES */
    .autopagemargin {
        padding-right:40px;
        padding-left:40px;
    }
		.navarrow {
		    width:40px;
		}
		.larr {
		    margin:0 auto 0 12px;
		}
		.rarr {
		    margin:0 12px 0 auto;
		}
}