body {
background-color: #DDD;
/*background-image: linear-gradient(180deg, #EEFFFF 0%, #CCCCFF 100%);*/
}

a {
color: #0170c5;
text-decoration: none;
}

a:hover {
color: #0170c5;
background-color: #FFFFCC;
text-decoration: none;	
}

#webinar-link a,
#webinar-link a:visited {
color: #0170c5;
}

#fixed-header {
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #FFF;
box-shadow: 0 4px 6px 0 rgb(12 0 46 / 6%);
/*background-image: linear-gradient(90deg, #FFFFFF 0%, #CCC 100%);*/
}


#fixed-header-logo {
float: left;	
}

#fixed-header-logo img {
float: left;
}

#fixed-header h1 {
float: left;	
}

#fixed-gallery-links {
overflow: hidden;
position: fixed;
top: 160px;
left: 0;
width: 100%;
height: 40px;
/*background-color: #0170c5;*/
background-color: navy;
display: flex;
justify-content: space-evenly;
align-items: center;	
}

#fixed-gallery-links a,
#fixed-gallery-links a:visited {
color: white;
/*background-color: #0170c5;*/
background-color: navy;
font-size: 18px;
font-family: 'Roboto', sans-serif;
height: 80%;
display: flex;
align-items: center;
padding: 0px 3px;
transition: background-color .1s;
/*transition: color .5s;*/
border-radius: 7px; 
}

#fixed-gallery-links a:hover {
/*color: #0170c5;*/
color: navy;
background-color: white;	
}

#fixed-gallery-links-top {
background-color: white !important;
color: navy !important;	
}

#fixed-gallery-links-top:hover {
background-color: lightyellow !important;
}

#gallery-main {
margin-top: 190px;
margin-bottom: 20px;
min-height: 800px;
}

#gallery-main h1 {
font-family: 'Roboto', sans-serif;
font-size: 42px;
text-align: center;
color: #0170c5;
height: 40px;
}

#gallery-main h2 {
font-family: 'Roboto', sans-serif;
font-size: 36px;
text-align: center;
color: #0170c5;
width: 100%;
text-align: center;
}

.templates-category {
/*margin-top: 60px;*/
/*border-bottom: 2px solid #666;*/	
width: 100%;
max-width: 1500px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
}

.templates-category h2 {
background-color: #0170c5;
color: white !important;
box-shadow: 5px 5px 5px #333;
font-size: 30px !important;
border-radius: 10px;
/*margin-top: 80px;*/
cursor: pointer;
/*background-image: url('../images/svg/arrow-left-circle-white.svg'),url('../images/svg/arrow-right-circle-white.svg');
background-repeat: no-repeat,no-repeat;
background-position: 30% 50%,70% 50%;*/

background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24px' width='80px' style='background-color: mediumblue; padding-left: 5px; font-family: arial;'><text x='0' y='18' fill='white' font-size='16'>◄ BACK</text></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24px' width='80px' style='background-color: mediumblue; padding-left: 5px; font-family: arial;'><text x='0' y='18' fill='white' font-size='16'>◄ BACK</text></svg>");
background-position: 20% 50%,80% 50%;
background-repeat: no-repeat;

transition: background-color .3s;
}

.templates-category h2:hover {
background-color: deepskyblue;
}

.templates-category h2 a {
color: white !important;
background-color: transparent !important;	
font-size: 28px !important;
margin-left: 15px;
vertical-align: middle;
font-weight: normal !important;
transition: background-color .1s;
}

.templates-category h2 a:hover {
color: limegreen !important;
background-color: transparent !important;	
}

.template-card {
display: inline-block;
border-radius: 10px;
border: 1px solid #999;
margin-bottom: 40px;
cursor: pointer;
overflow: hidden;
background-color: #444444;
color: white;
width: 300px;
height: 180px;
transition: width .3s, height .3s;
}

.template-card:hover {
/*background-color: #FFFFCC;*/
/*color: black;*/
border-color: #000;
width: 400px;
height: 300px;
}

.template-card-desc {
padding: 10px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}

.template-card-img {
width: 100%;
}

.template-card-img img {
width: 100%;
filter: grayscale(.6);
transition: filter .3s;
}

.template-card-img:hover img {
filter: grayscale(0);	
}

.template-card-name {
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 22px;
vertical-align: middle;
border-top: 1px solid #444444;
margin-top: -4px;
}

.template-name {
vertical-align: middle;	
}

.new-user-message {
vertical-align: middle;
font-size: 30px;
}

#free-count {
vertical-align: inherit !important;
/*font-size: 24px;*/
}

.free-tag {
background-color: lime;
padding: 1px 7px;
border-radius: 10px;
font-size: 14px;
vertical-align: middle;
margin-left: 10px;
color: black;
margin-left: 0px;
font-weight: normal;
}

.free-tag-big {
background-color: lime;
padding: 1px 7px;
border-radius: 10px;
font-size: 18px;
vertical-align: top;
margin-left: 10px;
color: black;
margin-left: 0px;
font-weight: normal;
display: inline-block;
margin-top: 3px;
}

#pro-count {
vertical-align: inherit !important;
/*font-size: 24px;*/
}

.pro-tag {
background-color: orange;
padding: 1px 7px;
border-radius: 10px;
font-size: 14px;
vertical-align: middle;
margin-left: 0px;
color: black;
}

.pro-tag-big {
background-color: orange;
padding: 1px 7px;
border-radius: 10px;
font-size: 18px;
vertical-align: top;
margin-left: 0px;
color: black;
display: inline-block;
margin-top: 3px;
}

#templates-list {
display: none;	
}

#templates-desc-list {
display: none;	
}

#header-button-start {
background-color: green;
color: white;
border-radius: 10px;
font-size: 26px;
padding: 0px 20px;
cursor: pointer;
box-shadow: 3px 3px #999999;
margin-top: 68px;
font-family: 'Roboto', sans-serif;
transition: background-color .1s;
}

#header-button-start:hover {
background-color: #33CC33;	
}

#header-button-contact {
background-color: #0170c5;
color: white;
border-radius: 10px;
font-size: 26px;
padding: 0px 20px;
cursor: pointer;
box-shadow: 3px 3px #999999;
margin-top: 68px;
font-family: 'Roboto', sans-serif;
transition: background-color .1s;
}

#header-button-contact:hover {
background-color: #3399FF;
}

#signup-container-placeholder {
width: 400px;
height: 150px;	
}

#gallery-messages {
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 24px;
background-color: #EEE;
border: 1px solid black;
padding: 10px 0px;
width: 380px;
margin: 20px 0px 0px 0px;
border-radius: 10px;
font-weight: bold;
display: flex;
justify-content: space-evenly;
}

#gallery-messages table {
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 24px;
font-weight: bold;
}

#gallery-messages-col1 {
width: 100%;	
}

#gallery-messages-col2 {
width: 33%;	
}

#gallery-toc {
font-family: 'Roboto', sans-serif;
text-align: center;
background-color: #0170c5;
border: 2px solid black;
padding: 10px 30px;
width: 840px;
margin: auto;
border-radius: 10px;
font-weight: bold;
margin-top: 30px;	
}

#gallery-toc table {
width: 100%;
}

#gallery-toc tr {
	
}

#gallery-toc td {
width: 25%;
text-align: left;
font-size: 22px;
padding: 3px 0px;
}

#gallery-toc a {
color: white;	
padding: 0px 6px;
border-radius: 3px;
transition: background-color .1s;
}

#gallery-toc a:hover {
color: black;
background-color: azure;
}

a.anchor {
display: block;
position: relative;
top: -180px;
visibility: hidden;	
}

#live-demo {
width: 150px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
border-radius: 10px;
background-color: #0170c5;
cursor: pointer;
color: white;
margin-left: 0px;
border: 2px solid #333;
margin-bottom: 20px;
transition: background-color .1s;
}

#live-demo:hover {
background-color: #3399FF;
color: white;	
}

#live-demo-text {
display: inline-block;
width: 100px;
vertical-align: middle;
text-align: left;
}

#whats-new {
width: 150px;
font-family: 'Roboto', sans-serif;
font-size: 24px;
border-radius: 10px;
background-color: #0170c5;
cursor: pointer;
color: white;
margin-left: 0px;
border: 2px solid #333;
transition: background-color .1s;
}

#whats-new:hover {
background-color: #3399FF;
color: white;	
}

#whats-new-text {
display: inline-block;
width: 100px;
vertical-align: middle;
text-align: left;
}

#youtube-img {
width: 25px;
display: inline-block;
vertical-align: middle;
}

#chat-img {
width: 25px;
display: inline-block;
vertical-align: middle;
}

#gallery-messages span {
vertical-align: middle;	
}

#fixed-header-logo {
float: left;	
width: 20%;
min-width: 400px;
}

#microsoft-logos {
float: left;
margin-top: 68px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-evenly;
width: 50%;
margin-left: 50px;
}

#header-buttons {
display: flex;
float: right;
justify-content: space-around;
width: 18%;
}

#microsoft-365 {
float: left;
margin-right: 40px;	
}

#microsoft-365 img {
height: 40px;	
}

#sharepoint-online {
float: left;
margin-right: 40px;	
}

#sharepoint-online img {
height: 50px;	
}

#microsoft-lists {
float: left;	
}

#microsoft-lists img {
height: 40px;	
}

#pricing-announcement-table {
margin: auto;
}

#pricing-announcement {
font-size: 20px;	
}

#featured-price {
font-size: 30px;
background-color: #D5F5E3;
font-family: sans-serif;
}

#featured-price a {
color: darkgreen;	
}

.free-pro-table {
border: 1px solid black;
border-collapse: collapse;
width: 165px;
/*box-shadow: 5px 5px #999;*/
}

.free-pro-table td {
border: 1px solid black;
cursor: pointer;	
}

.free-pro-header {
background-color: #444;
color: white;
font-size: 24px;
font-family: 'Roboto', sans-serif;
width: 50%;
font-weight: normal;	
}

.free-pro-body {
font-size: 20px;
text-align: left;
background-color: white;
transition: background-color .1s;	
}

.free-pro-body:hover {
background-color: #FFFFCC;	
}

.free-pro-body ul {
padding: 0px 5px 0px 30px;
margin-bottom: 5px;
margin-top: 2px;	
}

#misc-templates {
border-bottom: none;	
}

#charting-header {
/*width: 200px !important;*/	
}

#charts-training {
background-color: #0170c5;
color: white;
border-radius: 10px;
font-size: 26px;
padding: 0px 20px;
cursor: pointer;
box-shadow: 3px 3px #999999;
font-family: 'Roboto', sans-serif;
margin: 20px auto 0px auto;
width: fit-content;
transition: background-color .1s;
}

#charts-training:hover {
background-color: #3399FF;
}

.page-top-link {
text-align: center;
font-size: 20px;
margin: auto;
background-color: #444;
color: white;
border-radius: 7px;
width: 150px;
font-family: 'Roboto', sans-serif;
transition: background-color .1s;	
}

.page-top-link:hover {
background-color: lightyellow;
color: #444;	
}

#gallery-filters {
display: flex;
width: 630px;
padding-left: 36px;
margin: auto;
justify-content: center;
}

#gallery-filters-left {
display: flex;
}

#gallery-filters-right {
display: flex;
}

#gallery-category-select {
font-size: 24px;
color: #BBB;
padding: 0px 10px 0px 10px;
border-radius: 7px;
cursor: pointer;
width: 270px;
border: 2px solid black;
}

.gallery-category-select-in-focus {
color: black !important;	
}

#gallery-filter-search {
font-size: 24px;
text-align: left;
padding: 0px 10px 0px 10px;
width: 358px;
color: #BBB;
border-radius: 7px;
border: 2px solid black;
}

.gallery-filter-search-in-focus {
color: black !important;	
}

#gallery-filter-clear {
font-size: 30px;
color: #333;
padding: 0px 10px 0px 10px;
cursor: pointer;
display: inline-block;
overflow: hidden;
vertical-align: middle;
display: inline;
visibility: hidden;
}

#gallery-filter-clear:hover {
color: black;
}

#filter-search-templates {
display: none;
margin-bottom: 0;	
}

#signup-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 1180px;
margin: auto;
}

#not-logged-in-message {
background-color: green;
color: white;
font-weight: bold;
border-radius: 10px;
font-size: 28px;
padding: 0px 20px;
cursor: pointer;
box-shadow: 3px 3px #999999;
font-family: 'Roboto', sans-serif;
margin: 0px auto 0px auto;
width: fit-content;
height: fit-content;
transition: background-color .1s;
display: none;
}

#not-logged-in-message:hover {
color: black;
background-color: #99FF99;
}

#will-sticky-note-container {
width: 400px;
display: none;
justify-content: flex-end;
}

#will-sticky-note {
width: 190px;
height: 180px;
padding: 20px 10px 10px 10px;
background-color: lightyellow;
color: black;
line-height: 30px;
font-family: 'Reenie Beanie';
font-size:27px;
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
transform: rotate(6deg);
margin-top: -70px;
position: relative;
z-index: 1;
cursor: pointer;
transition: .5s
}

#will-sticky-note:hover {
transform: scale(1.50);
transition: .5s
}

#just-copy-and-paste {
margin-bottom: 10px;
padding: 15px 15px 10px 15px;
background-color: #F3F3F3;
border-radius: 15px;
border: 1px solid #999;
display: none;
}

/* CATEGORY CARDS */

#category-tiles {
width: 100%;
max-width: 1500px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
margin-top: 25px;	
}

.category-card {
display: inline-block;
border-radius: 10px;
border: 1px solid #999;
margin-bottom: 40px;
cursor: pointer;
overflow: hidden;
background-color: #444444;
color: white;
width: 300px;
height: 180px;
transition: width .3s, height .3s;
}

.category-card:hover {
/*background-color: #FFFFCC;*/
/*color: black;*/
border-color: #000;
width: 400px;
height: 300px;
}

.category-card-desc {
padding: 10px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
}

.category-card-img {
/*width: 100%;*/
width: 100%;
background-color: #0170C5;
display: flex;
justify-content: center;
transition: background-color .3s;
}

.category-card-img:hover {
background-color: deepskyblue;	
}

.category-card-img img {
width: 30%;
padding: 10% 10%;
/*Inverts black to white*/
/*filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(171deg) brightness(101%) contrast(105%);*/
/*filter: grayscale(.6);*/
/*transition: filter .3s;*/
}

.category-card-img:hover img {
/*filter: grayscale(0);*/
	
}

.category-card-name {
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 22px;
vertical-align: middle;
border-top: 1px solid #444444;
}

.category-card-name {
vertical-align: middle;	
}