/* Drawify Prototype Website styles */

html {position: relative; min-height: 100%; scroll-behavior: smooth;}
body {color: #25252d; font-family: 'Poppins', Arial, sans-serif; }
/*
h1 {font-family: 'Caveat Brush', cursive; font-weight: 400; font-size: 5rem; letter-spacing: -3px; color: #393ce5;}
h2 {font-family: 'Caveat Brush', cursive; font-size: 3.2rem; font-weight: 600;}
h3 {font-family: 'Caveat Brush', cursive; font-size: 2.8rem;}
*/
h1 {font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 4rem; letter-spacing: -1px;}
h1.imagetitle {font-size: 2rem;}
h2 {font-family: 'Poppins', sans-serif; font-size: 3.2rem; font-weight: 600; letter-spacing: -1px;}
h3 {font-family: 'Poppins', sans-serif; font-size: 2.4rem; font-weight: 600;}
h4 {font-size: 1.8rem;}
h5 {font-size: 1.25rem;}
/* strong {font-weight: 700;} */
a {color: #0097a7;}
a:hover {color: #104960;}
.table {border-bottom: 2px solid #dee2e6; margin-bottom: 2rem;}

/* Indigo - #0033af */
/* Coffee - #faf5f2 */
/* Light grey - #f7f7f7 */

/* COLOURS 
/* Orange - #ff5d12 
/* Dark orange - #e13616 
/* Ultramarine - #393ce5 
/* Mid ultramarine - #5456f5 
/* Frost - #f3f4fc 
/* Cream - #fffbef 
/* Light grey - #f5f5f5 
/* Dark stone - #545465 */

.navbar {padding: 20px;}
a.navbar-brand {height: 52px; width: 180px; background: url('../images/logo-storytellersketches.png') no-repeat; background-size: auto 52px; min-width: 180px;}
a.navbar-brand-admin {height: 52px; width: 180px; background: url('../images/logo-storytellersketches-white.png') no-repeat; background-size: auto 52px; min-width: 180px;}
.navbar-nav {margin-top: 5px; margin-left: 1rem;}
.nav-item {margin-left: 0; margin-right: 1rem; padding-left: 1rem; padding-right: 1rem;}
a.nav-link:link, a.nav-link:visited {color: #444;}
a.nav-link:hover {color: #0033af;}
li.active a.nav-link, span.active a.nav-link, a.nav-link.active {color: #0033af; font-weight: bold;}
.navbar-admin {background: #393ce5;}
.navbar-admin .navbar-nav li a.nav-link:link, .navbar-admin .navbar-nav li a.nav-link:visited {color: #ecedfb;}
.navbar-admin .navbar-nav li a.nav-link:hover {color: #fff;}
.navbar-admin .navbar-nav li.active {background: #2d30c1; border-radius: 6px;}
.navbar-admin .navbar-nav li.active a.nav-link {color: #fff; font-weight: bold;}
.dropdown-menu {padding: 1rem 1.5rem; line-height: 1.8rem;}
.navbar-toggler-icon {background: url('../images/ss-hamburger.png');}

a.btn-inlineimagesearch {display: block; border-radius: 100%; background: #f5f5f5; text-transform: uppercase; color: #545465; margin: 2rem; padding: 1rem;}
a.btn-inlineimagesearch:hover {text-decoration: none; background: #e4e4e4; color: #434354;}


.hero {background: #f3f4fc url('../images/bg-right.png') right no-repeat; background-size: contain; min-height: 400px;}
.classifier {color: #ff5d12; font-size: 0.7rem; text-transform: uppercase; margin: 0;}
.keyline-above {border-top: 1px solid #ddd;}
.keyline-below {border-bottom: 1px solid #ddd;}
.keyline-right {border-right: 1px solid #ddd;}
.keyline-left {border-left: 1px solid #ddd;}
.keyline-above-dark {border-top: 1px solid #25252d;}
.keyline-rightwhite {border-right: 2px solid #fff;}
.keyline-belowwhite {border-bottom: 2px solid #fff;}
 
.avatar-tiny {width: 24px; height: 24px; border-radius: 50%; overflow: hidden;}
.avatar-vsml {width: 32px; height: 32px; border-radius: 50%; overflow: hidden;}
.avatar-sml {width: 60px; height: 60px; border-radius: 50%; overflow: hidden;}
.avatar-med {width: 120px; height: 120px; border-radius: 50%; overflow: hidden;}
.avatar-nav {border-radius: 50%; overflow: hidden; background: #0033af; padding: 10px; color: #fff;}
.avatar-nav-admin {min-width: 60px; min-height: 60px; border-radius: 50%; overflow: hidden; background: #0033af; padding: 10px; color: #fff;}

.btn-primary {background-color: #1dd7cc; border-color: #1dd7cc;}
.btn-primary:hover {background-color: #1db9bf; border-color: #1db9bf;}
.btn-primary.focus,.btn-primary:focus {color:#fff; background-color: #0097a7; border-color: #0097a7; box-shadow: 0 0 0 .2rem rgba(38,143,255,.5);}
.btn-primary.disabled, .btn-primary:disabled {color: #fff; background-color:#d1d1d4; border-color: #d1d1d4}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {color: #fff; background-color: #0097a7; border-color:#0097a7}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,143,255,.5)}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}

.btn-outline-primary {background-color: #fff; border-color: #ff5d12; color: #ff5d12}
.btn-outline-primary:hover {background-color: #fef4f2; border-color: #e55716; color: #e55716;}

.btn-secondary {background-color: #848490; border-color: #848490;}
.btn-secondary:hover {background-color: #545465; border-color: #545465;}
.btn-outline-secondary {background-color: #ffffff; border-color: #848490;}
.btn-outline-secondary:hover {background-color: #f9f9f9; border-color: #545465; color: #545465;}
.btn-dark {background-color: #1b1d77; border-color: #1b1d77;}
.btn-dark:hover {background-color: #0f1046; border-color: #0f1046; color: #ecedfb;}
.btn-link {color: #0097a7;}
.btn-link:hover {color: #104960;}

/* .card-body {padding-top: 0 !important;} */
.card-image {border: 0;} /* border-radius: 5px; border-color: #eee; */
.card-image .card-body {padding: 30px;}
.image-detail {text-align: right;}
/* .card-image:hover {border-color: #ccc;} */
.imageControls {padding-right: 1rem; position: relative; left: -10000px;}
.card-image:hover .image-detail {opacity: 0.7;}
.card-image:hover .imageControls {position: relative; left: 0px;}
.card-blank {border: 0;}

.storytelleravatar-detail {opacity: 0.9;}
.card-image:hover .storytelleravatar-detail {opacity: 1.0;}
.storytelleravatar-name {font-size: 1.2rem; color: #fff; opacity: 1.0; position: relative; margin-top: -2rem; padding: 0 0 2px 0.5rem;}
.storytelleravatar-name a, .storytelleravatar-name a:hover {color: #fff; text-decoration: none;}

.card-set {border-radius: 5px; border-color: #93d8d5; background: #cdebea; opacity: 0.8; min-height: 8rem;}
.card-set .card-body {padding: 10px;}
.card-set:hover {opacity: 1.0; cursor: pointer;}
.card-set a:link, .card-set a:visited {color: #121212;}
.card-set a:hover {text-decoration: none;}

.floatleft {float: left; margin: 0 2rem 0 0; vertical-align: middle}
.floatright {float: right; margin: 0 0 0 2rem; vertical-align: middle}
.shim-right {margin-right: 8px;}
.shim-bigright {margin-right: 44px;}
.shim-left {margin-left: 1rem;}
.bg-cream {background: #fffbef;}
.bg-frost {background: #f3f4fc;}
.bg-lightgrey {background: #f7f7f7;}
.bg-darkstone {background: #597081;}
.bg-ultramarine {background: #393ce5;}
.bg-mid-ultramarine {background: #a9aafa;}
.bg-coffee {background: #faf5f2;}
.bg-jade {background: #ebf9f8;}
.bg-grass {background: #f6fbeb;}
.bg-teal {background: #03bdd0;}
.bg-white {background: #fff;}
.bg-pink {background: #fceef4;}
.bg-lightorange {background: #fde7dd;}

#footer {background: #494958 url('../images/bg-footer1.png') no-repeat; background-position: left bottom; color: #fff;}
#footer a:link, #footer a:visited {color: #e0e0e2;}
#footer a:hover {color: #fff;}

#footer-slim {background: #fff; color: #bbbbc3;}
#footer a:link, #footer a:visited {color: #e0e0e2;}
#footer a:hover {color: #fff;}

.list-benefits {list-style-type: none; margin: 0 0 2rem 0.2rem; padding: 0;}
.list benefits li {line-height: 1.4rem; margin: 0 0 1rem 0;}
.txt-left {text-align: left;}
.txt-right {text-align: right;}
.txt-center {text-align: center;}
.txt-med {font-size: 1.2rem;}
.txt-large {font-size: 1.4rem;}
.txt-xlarge {font-size: 1.8rem;}
.txt-giant {font-size: 2.2rem;}
.txt-epic {font-size: 4rem;}
.txt-mega {font-size: 4.6rem; font-weight: bold;}
.txt-small {font-size: 0.8rem;}
.txt-xsmall {font-size: 0.7rem;}
.txt-white {color: #fff;}
.txt-lilac {color: #5456f5;}
.txt-ultramarine {color: #5456f5;}
.txt-orange {color: #ff5d12;}
.txt-frost {color: #f3f4fc;}
.txt-cream {color: #fffbef;}
.txt-teal {color: #027c87;}
.txt-rose {color: #872657;}
.txt-ochre {color: #cfa403;}
.txt-grass {color: #4e9f01;}
.txt-app-lightgrey {color: #dddfe5;}
.txt-app-darkgrey {color: #545465;}
.txt-allcaps {text-transform: uppercase;}
.txt-highlight {background: #F3FAD2; padding: 0.2rem 0.4rem; border-radius: 8px;}

.nobullets {list-style-type: none; line-height: 1.8rem;}
.icon-tick {color: #027c87; margin-right: 5px;}

.pad-top {padding-top: 2rem;}
.pad-littletop {padding-top: 1rem;}
.pad-microtop {padding-top: 0.5rem;}
.pad-bigtop {padding-top: 4rem;}
.pad-bottom {padding-bottom: 2rem;}
.pad-bigbottom {padding-bottom: 4rem;}
.pad-littlebottom {padding-bottom: 1rem;}
.pad-microbottom {padding-bottom: 0.5rem;}
.pad-left {padding-left: 86px;}
.pad-right {padding-right: 86px;}
.pad-midleft {padding-left: 8rem;}
.pad-midright {padding-right: 8rem;}
.pad-littleleft {padding-left: 40px;}
.pad-littleright {padding-right: 40px;}
.pad-microright {padding-right: 20px;}
.pad-bigleft {padding-left: 16rem;}
.pad-bigright {padding-right: 16rem;}
.pad-microleft {padding-left: 20px;}
.nopad-left {padding-left: 0; margin-left: 0;}
.nopad-right {padding-right: 0; margin-right: 0;}
.sidepads {padding-right: 3rem; padding-left: 3rem;}
.toppads {padding-top: 0.6rem; padding-bottom: 0.6rem;}
.bigsearchbutton {padding-left: 2rem; padding-right: 2rem;}
.p-nomargins {margin: 0;}

.modal-panel {display: block; background: none; border-radius: 8px; height:auto; overflow:auto; margin: 0 0 0.5rem 0; padding: 10px;}
.modal-panel:hover {background: #f3f4fc;}

.menuToggle:not(.collapsed) .rotate-icon {
  transform: rotate(180deg);
}

.fixed {width: 200px;}
ul.benefits {list-style-type: none; font-size: 1.4rem; margin: 0 0 2rem 2rem; padding: 0;}
ul.benefits li {margin-bottom: 0.5rem;}

.profile-header {min-height: 50px; background: #5456f5; padding: 0 0 1rem 0; align-items: flex-end;}
.profile-header-under {min-height: 50px; padding-top: 1rem;}
.profile-header .profile-pic {position: relative; top: 5rem; border-radius: 100%; border: 3px solid #fff; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;}
.profile-byline {font-family: 'Architects Daughter', cursive; font-size: 1.4rem;}
.profile-contact {color: #848490;}
.profile-contact a:any-link, .profile-contact a:visited {color: #848490;}
.profile-contact a:hover {color: #505f79;}
.profile-contact span, .profile-contact a {margin-right: 0.5rem;}
.profile-stats-image {color: #545465;}
.profile-stats {line-height: 1.2rem; margin: 0.5rem 0 1rem 0.5rem; color: #545465;}

.myprofile-header {background: #8eebe6; align-items: flex-end;}

.fav-on {color: #dc1464;}
.promo-icon-container {background: #fff; min-width: 96px; padding: 8px; border-radius: 8px;}
.tag {background: #f5f5f5; text-transform: uppercase; color: #545465; border-radius: 1rem; font-size: 0.73rem; padding: 3px 8px; margin: 0 6px 0 0;}
.progressbar {margin: 0 0 1rem 0; min-width: 100%; color: #848490; display: block; overflow: hidden;}
.step {float: left; border-top: 3px solid #d4d4fc; padding: 6px 0 0 0;}
.step-active {float: left; border-top: 3px solid #5456f5; padding: 6px 0 0 0; color: #5456f5;}
.panel-price {margin: 1rem 0; border: 2px solid #bbbbc3; border-radius: 4px; padding: 10px; font-size: 2rem; text-align: center; clear: both;}
.panel-tip {margin: 2rem 0; background: #faf5f2; border-radius: 4px; padding: 20px; font-size: 1.2rem; text-align: center;}
p.skilltags {line-height: 2.4rem;}
p.skilltags span.tag-med {background: #f5f5f5; text-transform: uppercase; color: #545465; border-radius: 1rem; font-size: 0.8rem; padding: 6px 16px; margin: 0 0.5rem 0 0; cursor: default;}
a.tag-med {background: #f5f5f5; text-transform: uppercase; color: #545465; border-radius: 1rem; font-size: 0.8rem; padding: 6px 16px; margin: 0 0.5rem 0 0; cursor: default; text-decoration: none;}
a.tag-med:hover {text-decoration: none; background: #e4e4e4; color: #434354;}

.pagetabs {display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; background: url('../images/bg-lightgreyline.png') repeat-x; background-position: bottom;}
.pagetabs li {margin: 0 1rem 0 0; padding: 0 1rem; } 
.pagetabs li a {border: 3px solid transparent; display: block; padding: 0.5rem 1rem; color: #545465;}
.pagetabs li a:hover {border-bottom: 3px solid #393ce5; color: #323243; text-decoration: none; color: #393ce5;}
.pagetabs li a.active {border-bottom: 3px solid #393ce5; color: #393ce5;}

.form-panel {border-radius: 12px; border-color: #eee; padding: 2rem; -webkit-box-shadow: 0px 3px 25px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 25px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 25px 0px rgba(0,0,0,0.3);}

/* AJAX element states */
      button.favorite-button {
        display: inline;
      }
      .favorite button.favorite-button {
        display: none;
      }
      button.unfavorite-button {
        display: none;
      }
      .favorite button.unfavorite-button {
        display: inline;
      }

      button.addtocart-button {
        display: inline;
      }
      .incart button.addtocart-button {
        display: none;
      }
      button.removefromcart-button {
        display: none;
      }
      .incart button.removefromcart-button {
        display: inline;
      }

      button.follow-button {
        display: inline;
      }
      .follow button.follow-button {
        display: none;
      }
      button.unfollow-button {
        display: none;
      }
      .follow button.unfollow-button {
        display: inline;
      }

.setcover {margin: 0 0 0.5rem 0;}
.setcover .setcoverrow {min-height: 90px;}
.setcover .setcoverrowlarge {min-height: 120px;}
.setcover .setcover2rows {min-height: 180px;}
.setcover .setcover2rowslarge {min-height: 240px;}
.border-grey {border: 1px solid #eee;}
.setcover .setbottomleft {border-right: 1px solid #eee; border-left: 1px solid #eee; border-bottom: 1px solid #eee;}
.setcover .setbottomright {border-right: 1px solid #eee; border-bottom: 1px solid #eee;}
.setcovertitle {padding: 0 0.5rem;}

.cartitem {min-height: 50px; margin: 0 0 1rem 0; border-top: 1px solid #eee; padding: 1rem 0 0 0;}
.cartitemthumbnail {min-height: 150px;}