#gallery-json{margin-top:40px}
#tutorials-json{margin-top:40px}
/* ---------------- gallery JSON ---------------- */

                    .step-btn,
input[type="submit"].step-btn,
input[type="button"].step-btn{font-family:NotesEsa;display:inline-block;float:left;font-size:14px;font-weight:700;color:#006762;cursor:default;margin:5px;padding:10px 20px;border:2px solid #006762;border-radius:2px;text-transform:uppercase;letter-spacing:0.5px;background:none;transition:all 0.35s ease}
                    .step-btn:disabled,
input[type="submit"].step-btn:disabled,
input[type="button"].step-btn:disabled{opacity:0.3;color:gray !important;border-color:gray}
                    .step-btn:hover,
input[type="submit"].step-btn:hover
input[type="button"].step-btn:hover{background:none}
                    .step-btn:hover:not(:disabled),
input[type="submit"].step-btn:hover:not(:disabled),
input[type="button"].step-btn:hover:not(:disabled){background-color:#006762;color:white !important;cursor:pointer}

/* CATEGORIES */
div.categories{text-align:left;border:none;padding:0;margin:0px 0px 70px 0px}
div.categories h2.page-heading{float:left}
div.categories>ul{display:block;list-style-type:none;margin:0;padding:0;float:right}
div.categories>ul li.selected{background-color:#006762;color:white}
div.categories>ul li span:last-child{display:none;color:#636363}
div.categories>ul li.selected span:last-child{color:rgb(118,200,174)}
div.categories>ul.linefeed{width:100%;clear:both;float:left}
div.categories>ul.linefeed li{width:100%;border:none;border-radius:0;font-size: 20px;padding:5px 20px}
div.categories>ul.linefeed li span:last-child{display:inline-block}
div.categories>ul.linefeed li:not(.selected):hover span:last-child{color:rgb(118,200,174)}}

/* SORTING */
div.products h2{color:#006762}
div.products h2 ul.sort{font:16px Arial, Helvetica, sans-serif;float:right;color:#006762;margin:0;padding:0;position:relative;min-width:200px;text-align:right;margin-bottom:2em}
div.products h2 ul.sort li{list-style:none;list-style-type:none;cursor:pointer;padding:3px 10px;line-height:1.5em;border-bottom:2px solid #006762}
div.products h2 ul.sort li span:last-child{float:right}
div.products h2 ul.sort ul{display:none;top:32px;width:100%;position:absolute;right:0;text-align:left;z-index:3}
div.products h2 ul.sort li:hover ul{display:block}
div.products h2 ul.sort ul{padding:0}
div.products h2 ul.sort ul li{background-color:white;border-bottom:1px dashed #006762}
div.products h2 ul.sort ul li:hover{color:white;background-color:#006762}

/* SEARCH */
div.filter{position:relative;clear:both}
div.filter .fa{position:absolute;right:20px;top:7px;font-size:32px;pointer-events:none}
div.filter input.text{padding:15px 1%;width:100%}
div.filter input[type='submit']{position:absolute;right:0;top:0;height:40px;outline:none;background:transparent;color:transparent;margin:0}
div.filter input[type='submit']:hover~.fa{color:#006762}

/* CARDS */
.step-cards-container{text-align:center;margin:0 auto}
.step-card{font-size:14px;width:21em;height:35em;position:relative;display:inline-block;background-color:#fff;box-shadow:0 10px 15px 2px rgba(0,0,0,0.2);border-radius:2px;overflow:hidden;padding:0 !important;margin:20px 15px;overflow:hidden;font-family:NotesEsa;transition:all 0.35s ease}
.step-card a{text-decoration:none;cursor:pointer;display:flex;flex-direction:column;width:100%;height:100%}
.step-card .thumbnail{height:50%;align-items:center;justify-content:center;padding:10%;overflow:hidden;position:relative}
.step-card .entry-info{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;margin-bottom:auto}
.step-card .category{text-transform:uppercase;color:#fff;font-size:1em;letter-spacing:0.15rem;z-index:2;text-shadow:0 0 4px rgba(0,50,71,0.8)}
.step-card .dimmer{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(0deg,rgba(0,66,63,0.5) 0%,rgba(0,66,63,0) 60%,rgba(0,66,63,0.15) 100%);background-color:transparent;z-index:1}
.step-card a img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:all 1s 0.05s ease;object-position:50% 10%;margin:0}
.step-card .heading{font-size:1.7em;font-weight:700;color:#006762;line-height:1.1em;padding:0;text-align:left}
.step-card .pillar{display:inline-table;width:-moz-max-content;width:max-content;color:#fff;background-color:rgba(0,66,63,0.7);text-transform:uppercase;padding:3px 5px;font-size:0.9em;letter-spacing:0.1em;transform:translateY(-50%);position:absolute;top:0;border-top:2px solid crimson}
.step-card .details{text-align:justify;line-height:1em;max-height:5em;font-size:1em;margin-top:auto;color:#8197A6;overflow:hidden}
.step-card .meta{display:flex;flex-direction:row;color:#8197A6;font-size:1em;text-transform:uppercase;margin-top:0.5em;line-height:1.8em;padding:0;border-bottom:1px dashed #c8d4dc;border-top:1px dashed #c8d4dc;white-space:nowrap;overflow:hidden;align-items:center;flex-shrink:0}
.step-card .meta span{margin-right:15px;color:#8197A6;text-align:left}
.step-card .entry{display:flex;flex-direction:column;justify-content:flex-end;width:100%;position:relative;height:40%;padding:6% 10% 0 10%;z-index:2}
.step-card .cta{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;color:#006762;margin-top:auto;padding:0 10%;border-radius:2px;cursor:pointer;transition:all 0.25s ease;width:100%;height:10%}
.step-card .cta label{font-size:1em;text-transform:uppercase;letter-spacing:0.25rem;cursor:pointer}
.step-card .cta .arrow{margin-left:auto;font-family:Arial, Lato, sans-serif;font-size:2.3em;height:1.8rem}
/* -- HOVERING -- */
.step-card:not(.disabled):hover{transform:translateY(-10px) scale(1);box-shadow:0 20px 30px 0 rgba(0,0,0,0.1)}
.step-card:not(.disabled):hover img{transform: scale(1.1);}
.step-card img:hover{opacity:1}
.step-card:not(.disabled) a:hover .cta .arrow{animation:cta-arrow 1s ease-in-out infinite}
@keyframes cta-arrow {
      0% { transform: translateX(  0) }
     50% { transform: translateX(50%) }
    100% { transform: translateX(  0) }
}
/* -- MANAGE -- */
.step-card.manage{height:39em}
.step-card.manage a{height:35em}
.step-card.manage .ctl{height:4em;border-top:1px solid #dedede;width:100%;background-color:white;text-align:left;line-height:4em;padding:0 10%}
.step-card.manage .ctl form *{font-weight:700;color:#006762;font-size:1em;font-family:NotesEsa;text-transform:uppercase;letter-spacing:0.15em}
.step-card.manage .ctl label{float:left;cursor:pointer}
.step-card.manage .ctl input[type='checkbox']{width:1em;height:1em}
.step-card.manage .ctl input[type="submit"]{background:transparent url(../images/edit-large.png) no-repeat right center;background-size:1.3em 1.3em;border:none;cursor:pointer;float:right;padding-right:30px;margin:0;line-height:4em;padding:0 1.5em}
.step-card.manage .ctl input:hover{color:red;cursor:pointer}
/* -- VIDEO CARD -- */
.step-card.video{background-color:#00423f}
.step-card.video .heading{color:white}
.step-card.video .meta{border-color:#8197A6}
.step-card.video .cta{color:white}
/* -- IMAGE CARD -- */
.step-card.image{background-color:#00423f}
.step-card.image .thumbnail{height:90%}
.step-card.image a img{object-position:unset}
.step-card.image .entry{position:absolute;bottom:10%;background-image:linear-gradient(0deg,rgba(0,66,63,1) 0%,rgba(0,66,63,0) 70%,rgba(0,66,63,0) 100%);background-color:transparent}
.step-card.image .heading{color:white}
.step-card.image .pillar{display:none}
.step-card.image .details{display:none}
.step-card.image .meta{border-color:#8197A6}
.step-card.image .cta{color:white}
/* SMALL */
.step-cards-sm .step-card{width:17em;background-color:#00423f;background-image:linear-gradient(180deg,#006762 0%,#00423f 70%)}
.step-cards-sm .step-card .thumbnail{height:90%}
.step-cards-sm .step-card .entry{position:absolute;bottom:11%}
.step-cards-sm .step-card .heading{color:white;height:4em;text-align:center;text-shadow:0 -1px 3px rgba(0,0,0,0.5)}
.step-cards-sm .step-card .pillar,
.step-cards-sm .step-card .details,
.step-cards-sm .step-card .meta{display:none}
.step-cards-sm .step-card .cta{color:white;z-index:1}

/* -- DISABLED -- */
.step-card.disabled{border-color:#999999;background-color:#eeeeee}
.step-card.disabled a{opacity:0.5;pointer-events:none}
.step-card.disabled a *{color:#969696 !important}
.step-card.disabled .entry{background:none}
.step-card.disabled .heading{text-shadow:1px 1px 1px black}
.step-card.disabled .pillar{background-color:rgba(0,0,0,0.6);border-color:#585858}
.step-card.disabled .meta{border-color:#d4d4d4}
.step-card.disabled a img{
	filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

/* CUSTOM FRONT PAGE */
.home .step-cards-container{max-width:1150px}
.home .step-cards-sm .step-card .thumbnail{overflow:visible}
.home .step-cards-sm .step-card .cta{background-color:rgba(0,66,63,0.5)}
.home .step-cards-sm .step-card a img{margin-top:50px}

/* STEP CARDS AS LIST */
.step-cards-list{margin-bottom:1em;padding-bottom:1em}
.step-card.list-card{display:none}
.step-cards-list .step-card.grid-card{display:none}
.step-cards-list .step-card.list-card{display:block}
.step-card.list-card{width:100%;margin:5px 0;padding:5px 10px!important;height:unset;background:none;box-shadow:none}
.step-card.list-card .list-card-content{display:flex;align-items:center}
.step-card.list-card .list-card-content>a{height:unset;width:unset;flex-direction:row;margin-right:0.5em;text-align:left}
.step-card.list-card .list-header{font-size:0.8em}
.step-card.list-card .list-header>*{display:inline-block;padding:0;margin:0}
.step-card.list-card .list-heading{font-size:22px;font-weight:400;line-height:1.2em}
.step-card.list-card .list-tags{margin-left:auto;text-align:right}
.step-card.list-card .list-tag{padding:0 5px;line-height:1.4em;vertical-align:top;border-radius:3px;background-color:lightgray}
.step-card.list-card .list-tag.category{text-shadow:none;color:inherit;letter-spacing:0;cursor:pointer}
.step-card.list-card .list-details{display:none}
.step-card.list-card .meta{border:0;margin:0;min-width:15em;justify-content:flex-end;align-items:center}
.step-card.list-card .meta span{margin:0 0.3em 0 0}
.step-card.list-card .meta span+span::before{content:"| ";color:#969696;opacity:0.5}
.step-card.list-card:not(.disabled):hover{transform:none;box-shadow:none;background-color:rgba(0 0 0 / 5%)}
.step-card.list-card:not(.disabled) .list-card-content>a:hover .list-heading{text-decoration:underline}
.step-card.list-card:not(.disabled) .list-tag.category:hover{background-color:white}
.step-card.disabled .list-card-content{opacity:0.5;pointer-events:none}
.step-card.disabled .list-card-content>a{opacity:1}
.step-card.disabled .list-card-content *{color:#969696 !important}
.step-card.list-card .list-tag.document{background-color:#93dfc7}
.step-card.list-card .list-tag.video{background-color:#ffcb90}
.step-card.list-card .list-tag.image{background-color:#b0daa5}
.step-card.list-card .list-tag.link{background-color:#accdfb}

.step-card.list-card.manage{display:flex}
.step-card.list-card.manage .list-card-content{width:calc(100% - 6em)}
.step-card.list-card.manage .ctl{width:6em;height:unset;background:none;border:0;padding:0 1em;margin:0;line-height:inherit}
.step-card.list-card.manage .ctl input[type="submit"]{padding:0 0.7em;line-height:1.4em}

.list-style-icon{margin-right:0.5em;font-size:0.8em;color:#999;cursor:pointer}
.list-style-icon:hover{color:#e56325;transform:scale(1.2)}
.list .list-style-icon.fa-list{color:#e56325;pointer-events:none;cursor:default;transform:scale(1.2)}
.grid .list-style-icon.fa-th-large{color:#e56325;pointer-events:none;cursor:default;transform:scale(1.2)}

/*  PAGING */
.gallery-paging{font:16px Arial,Helvetica,sans-serif;display:inline-block;position:relative;width:100%;color:#006762}
.gallery-paging label.elems_per_page{float:left;font-weight:700}
.gallery-paging select.elems_per_page{border:1px solid #EAEAEA;padding:3px 5px;margin-left:5px;font-weight:700}
.gallery-paging ul.pages{list-style:none;margin:0;padding:0;white-space:nowrap;float:right}
.gallery-paging ul.pages li{float:left;padding:0px;cursor:pointer;margin:5px;list-style:none}
.gallery-paging ul.pages li a{display:inline-block;text-align:center;text-decoration:none;margin:0;padding:10px 15px;border:2px solid #006762;border-radius:2px;font-weight:700}
.gallery-paging ul.pages li a span{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.gallery-paging ul.pages li a:hover{background-color:#006762;color:white}
.gallery-paging ul.pages li.current a,
.gallery-paging ul.pages li.current a:hover{color:white;background-color:#006762;cursor:default}
.gallery-paging ul.pages li.dotdotdot a{padding-left:2px;padding-right:2px;font-weight:700;border-color:transparent;background-color:rgba(51,94,111,0.1)}
.gallery-paging ul.pages li.dotdotdot a:hover{background-color:#006762;color:white}
.gallery-paging ul.pages li.prev a,
.gallery-paging ul.pages li.next a{color:#006762;border-color:transparent;background-color:rgba(51,94,111,0.1)}
.gallery-paging ul.pages li.prev a:hover,
.gallery-paging ul.pages li.next a:hover{background-color:#006762;color:white}
.gallery-paging ul.pages li.prev a.disabled,
.gallery-paging ul.pages li.next a.disabled{color:#a2a2a2;cursor:default;background:none}
.gallery-paging div.gotobox{display:block;width:200px;border:1px solid #acc1d0;z-index:99;margin:0;padding:0 0 5px 4px;position:absolute;top:38px;border-radius:4px;background-color:white}
.gallery-paging div.gotobox div.text{padding:0;float:left;line-height:26px}
.gallery-paging div.gotobox a.smbutton-go{display:inline-block;margin:0 3px 0 0 !important;padding:3px 8px !important;border-radius:0 5px 5px 0;text-decoration:none;background-color:#e2e8f1;border:1px solid #93a1b5}
.gallery-paging div.gotobox a.smbutton-go:hover{color:#005695}
.gallery-paging div.gotobox input[type="text"]{display:block;float:left;margin:0;letter-spacing:-0.25px;border:1px solid #93a1b5;border-right-width:0;padding:2px 4px;background:white;border-radius:3px 0 0 3px;width:60px;vertical-align:top}
.gallery-paging div.gotobox div.uparrow{height:5px;position:relative;display:block;float:left;top:-13px;width:100%;margin:0;text-align:center;color:#acc1d0;font-size:14px;}
.gallery-paging div.hidden{display:none}
/* ---------------- END gallery-paging ---------------- */

/* ---------------- Manage tutorials ---------------- */
.floating-commands{position:fixed;right:0;top:50%;margin:0;-ms-transform:translateY(-50%);transform:translateY(-50%)}
.floating-commands{border-radius:20px 0 0 20px;padding:10px 0;background-color:white;box-shadow:-2px 2px 3px 0 rgba(0,0,0,0.1);font-size:18px;transition:all 0.35s ease,z-index 1ms;z-index:9}
.floating-commands::before{content:"";position:absolute;left:-20px;top:0;width:20px;height:100%}
.floating-commands label{display:block;margin:5px 0 15px 0;text-align:center;cursor:pointer;font-weight:700}
.floating-commands input[type='checkbox']{width:18px;height:18px}
.floating-commands button{display:block;padding:5px 0;margin:5px auto;font-size:22px;height:22px;-webkit-box-sizing:content-box;box-sizing:content-box}
.floating-commands button,.floating-commands button:disabled{border-color:transparent}
.floating-commands.pinned,.floating-commands:hover{padding:10px 15px;z-index:1000002}
.floating-commands.pinned button,.floating-commands:hover button{width:22px;padding:5px;border-color:#006762}
.floating-commands.pinned button:disabled,.floating-commands:hover button:disabled{border-color:gray}

.manage-tutorials{max-width:1000px;margin:0 auto;background-color:white;padding:30px;box-shadow:3px 3px 10px 0 rgba(0,0,0,0.2);border-top:5px solid #006762;font-family:NotesEsa;font-size:14px}
#tutorial.manage-tutorials>*{padding:0;margin:0 0 20px 0}
#tutorial form{text-align:center}
#tutorial h2{color:#006762;text-align:center}
#tutorial .form-group{margin-bottom:20px;text-align:left;float:left;width:100%}
#tutorial .form-group .control-label{display:inline-block;width:20%;text-align:right;padding-right:20px;font-weight:700;color:#006762;vertical-align:top;text-transform:uppercase;float:left;position:relative;line-height:32px}
#tutorial .form-group.required .control-label::after{position:absolute;right:10px;color:red;content:"*"}
#tutorial .form-group .form-control{display:inline-block;width:80%;border:1px solid #006762;color:#006762;float:left;padding:6px 10px;margin:0;background-color:white}
#tutorial .form-group input.form-control:read-only{background-color:#e6e6e6}
#tutorial .form-group input[type='checkbox'].form-control{margin:6px 0;width:18px;height:18px}
#tutorial .error{display:block;margin-left:21%;color:red}
#tutorial .step-btn{float:none}
#tutorial .submit2{padding:3px 10px;color:white;border-color:white}
#tutorial .submit2:hover{color:#006762 !important;background-color:white}

#tutorial.add       {border-top-color:#006762}
#tutorial.edit      {border-top-color:#ed8a19}
#tutorial.enable    {border-top-color:#006762}
#tutorial.disable   {border-top-color:#ed5a4f}
#tutorial.remove    {border-top-color:red}
#tutorial.manageAdm {border-top-color:#006762}
#tutorial           div.icon{background-repeat:no-repeat;background-position:100% 0;height:50px;width:100%}
#tutorial.add       div.icon{background-image: url(../images/add-large.png)}
#tutorial.edit      div.icon{background-image: url(../images/edit-large.png)}
#tutorial.enable    div.icon{background-image: url(../images/activate-large.png)}
#tutorial.disable   div.icon{background-image: url(../images/deactivate-large.png)}
#tutorial.remove    div.icon{background-image: url(../images/delete-large.png)}
#tutorial.manageAdm div.icon{background-image: url(../images/user-large.png)}

#tutorial table{text-align:center;max-width:1000px;margin:0 auto 30px auto;font-size:16px}
#tutorial table thead tr{background-color:#006762}
#tutorial table thead th{color:#006762;font-size:1.2em;color:white;border:0}
#tutorial table tbody tr:nth-child(odd){background-color:#efefef}
#tutorial table tbody tr:hover{background-color:rgba(0,0,0,0.1)}
#tutorial table tbody tr td{color:#006762;vertical-align:top;padding:10px;border:0;height:148px;position:relative}
#tutorial table tbody tr td:first-child{width:148px}
#tutorial table tbody tr td img{width:128px;height:128px;object-fit:cover;object-position:left top;margin:0}
#tutorial table tbody tr td a.title{font-weight:700;font-size:1.6em;height:3.6em;line-height:1.2em;overflow:hidden;display:block;margin-bottom:7px}
#tutorial.manageAdm td{height:auto}
#tutorial.manageAdm td input[type='checkbox']{width:18px;height:18px}

/* ---------------- END Manage tutorials ---------------- */

@media screen and (max-width: 600px) {
	div.products h2 ul.sort{float:left;margin-top:1em}
	.gallery-paging label.elems_per_page{width:100%;margin-bottom:1.5em;text-align:center}
	.gallery-paging ul.pages{width:100%;margin-bottom:1.5em}
	.gallery-paging ul.pages li a{padding:6px 12px}
	
	.home .step-cards-sm .step-card{height:22em;font-size:8px;margin:1.5em 0.6em}
	.home .step-cards-sm .step-card a img{margin-top:10px}
	.home .step-cards-sm .step-card .entry{bottom:0}
	.home .step-cards-sm .step-card .heading{font-size:16px;height:2em}
	.home .step-cards-sm .step-card .thumbnail{height:100%}
	.home .step-cards-sm .step-card .entry-info,
	.home .step-cards-sm .step-card .cta{display:none}
}