/*****************************/
/**** POWERSLIDE MAIN STYLESHEET **********************************/
	/*****************************/
	/* feel free to make edits but the custom vars make sitewide edits easier */
	

/** CUSTOM VARS ***************************************************************************/
:root{
	
	/* Fonts ____________ (must correspond to the font-family names in @font-face*/
	--font-1:Nunito;
	--font-2:"Fredoka One";
	--font-3:Nunito;
	
	/* Colors ___________*/
	--color-bg-1:#f7f7f7;
	--color-bg-2:#ffffff;
	--color-lines:#d0d0d0;
	--color-border-1:#e7e7e7;
	--color-border-2:#d7d7d7;
	--color-accent-1:#db5f00;
	--color-accent-2:#ff8819;
	--color-accent-ui-1:#ffeeda;
	--color-accent-ui-2:#ffe8cc;
	--color-text-strong:#333333;
	--color-text-normal:#666666;
	--color-text-weak:#888888;
	--color-text-strong-reverse:#efefef;
	--color-text-normal-reverse:#888888;
	--color-text-weak-reverse:#666666;
	--color-link:#0070c0;
	--color-link-visited:#366092;
	--color-link-hover:#30aaff;
	--color-link-active:#aa0000;
	
	/* Text Colors ___________*/
	--color-text-red: #ff5b5b;
	--color-text-green: #87d147;
	--color-text-blue: #4790d1;
	--color-text-orange: #fcb737;
	--color-text-pink: #ff89f7;
	--color-text-purple: #a672e5;
	--color-text-white: #fff;
	--color-text-black: #030303;
	
	/* Backgrounds ___________*/
	--background-1:linear-gradient(180deg, var(--color-bg-1) 0%, var(--color-bg-2) 100%) fixed;
	
	/* Text _____________*/
	/* change main font size here. mostly using vw for landscape and vh for portrait, with a maximum size (using min) */
	--main-text-size-landscape:min(3vw, 20px); 
	--main-text-size-portrait:min(3vh, 20px); 
	--pixel-text-size: 16px; /* for text that don't use vw */
	--pixel-text-size-2: 14px; /* for smaller text that don't use vw */
	/*--main-text-size-monitor:1.5vw;  */
	/*--main-text-size-tablet:2vw;     */
	/*--main-text-size-tablet-2:3vw;   */
	/*--main-text-size-phone:6vw;      */
	
	/* Asthetics ___________*/
	--border-radius:0.25em;
	--topbar-height:50px;
}

/** MISC ***************************************************************************/
*{
	box-sizing:border-box;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-tap-highlight-color:transparent;
}

/************ FONT *****************/
/* Nunito minified by cssminifier.com */
@font-face{
	font-family:Nunito;
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url(../fonts/nunito5.woff2);
}
/*@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:local('Nunito Regular'),local('Nunito-Regular'),url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOOaBXso.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:local('Nunito Regular'),local('Nunito-Regular'),url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIMeaBXso.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:local('Nunito Regular'),local('Nunito-Regular'),url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:local('Nunito Regular'),local('Nunito-Regular'),url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:local('Nunito Regular'),local('Nunito-Regular'),url(https://fonts.gstatic.com/s/nunito/v12/XRXV3I6Li01BKofINeaB.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*/

@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fredokaone.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/** BODY ***************************************************************************/
body{
	/*	 Base Font _________________________*/
	font-family: var(--font-1), Arial, Helvetica, sans-serif;
	font-size: var(--main-text-size-landscape);
	color: var(--color-text-normal);
	/*	 Margin, Padding __________________*/
	margin:0; padding:0;
	/*	 Background _________________________*/
	background: var(--background-1);
	/*	 Others _________________________*/
	cursor:default;
}

@media (orientation:portrait){ /* portrait */
	body{
		font-size:var(--main-text-size-portrait);
	}
}

/* adjusting for various devices */
/*@media (max-width:1100px){ /* tablet */
/*	/* portrait */
/*	body{
/*		font-size:var(--main-text-size-tablet-2);
/*	}
/*	@media (orientation:landscape){ /* landscape */
/*		body{
/*			font-size:var(--main-text-size-tablet);
/*		}
/*	}
/*}
/*@media (max-width:500px){ /* phone */
/*	/* portrait */
/*	body{
/*		font-size:var(--main-text-size-phone);
/*	}
/*	@media (orientation:landscape){ /* landscape */
/*		body{
/*			font-size:var(--main-text-size-tablet-2);
/*		}
/*	}
/*}*/

divvv{
	border:1px solid;
}


/* custom scrollbar ***************************************************************************/
::-webkit-scrollbar {  width: 8px;}
::-webkit-scrollbar-track { background: var(--color-accent-ui-1); }
::-webkit-scrollbar-thumb {  background: var(--color-accent-1); }
::-webkit-scrollbar-thumb:hover {  background: var(--color-accent-2); }

/** LINKS ***************************************************************************/
a:link{text-decoration:none; color:var(--color-link);}
a:visited{text-decoration:none; color:var(--color-link-visited);}
a:hover, a:visited:hover{text-decoration:none; color:var(--color-link-hover);}
a:active{text-decoration:none; color:var(--color-link-active);}
a img{ border:0px; }
 
/** HEADINGS ***************************************************************************/
/*(generic. for individual article pages, .pageArticle headers are used below)*/
h1, h2, h3, h4, h5, h6{
	border:0px solid;
	text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.2);
	margin:0.8em 0;
	line-height:1.5em;
	font-family:var(--font-2);
	font-size:1.2em;
}

/** LISTS ***************************************************************************/
ul li, ol li{
	margin-bottom:0.6em; /* some space between items */
}

/** FOOTER ***************************************************************************/
.psfooter{
	color: var(--color-text-weak);
	font-size:var(--pixel-text-size);
	text-align:center;
	padding:0 15%;
}
.psfooter .small{
	font-size:0.8em;
}


/** FORMS ***************************************************************************/
label{
	font-size:0.85em;
	font-weight:bold;
}
input, select, textarea{
	font:inherit; /* font in forms don't inherit... */
	/*font-size:0.8em;*/
	color:var(--color-text-normal);
	background-color: var(--color-bg-1);
	transition:0.2s;
	font-weight:bold;
}
textarea.code{
	font-family:Lucida Console, monospace !important;
	line-height: 1em;
	font-weight:normal !important;
	font-size:0.9em;
}
input[type=text], input[type=password], input[type=email], select, textarea {
  width: 100%;
  padding: 0.7em 1.2em;
  margin: 0 0 1em 0;
  display: inline-block;
  border: 1px solid var(--color-lines);
  border-radius: var(--border-radius);
  box-sizing: border-box;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=button]:focus, select:focus, textarea:focus {
    outline: none !important;
	border:1px solid var(--color-accent-2) !important;
	box-shadow: 0 0 1em 0 var(--color-accent-2); /*glow*/
}

input[type=button]{
  width: 100%;
  background-color: var(--color-accent-1);
  color: white;
  padding: 1em 1.4em;
  margin: 0 0 1em 0;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: var(--color-accent-2);
}

/* default checkboxes will have no formatting in order not to interfere with class styles */

	/* checkboxes formatted with slidebox if using slidebox class */
.slidebox{
	position:relative;
	-webkit-appearance:none;
	appearance:none;
	outline:none;
	border-radius:var(--border-radius);
	transition:.5s;
	box-shadow: inset 0 0 0.2em rgba(0,0,0,0.2);
	width:2em;
	height:1.5em;
	background: var(--color-bg-1);
	cursor:pointer;
	vertical-align:middle;
}
.slidebox:checked{
	background-color: var(--color-accent-1);
}
.slidebox:before{
	content:'';
	position:absolute;
	width:0.9em;
	height:0.9em;
	border-radius:var(--border-radius);
	top:0;
	left:0;
	background: var(--color-bg-2);
	transition:.5s;
	/*transform:scale(0.5);*/
	box-shadow: 0 0.2em 0.2em rgba(0,0,0,0.2);
}
.slidebox:checked:before{
	left:1em;
}

	/* checkboxes togglecheckbox class, has fontawesome image */
	/* input should have data-icon="&#xf66f" data-explanation="blablabla"  */
	/* Fontawesome icon List is here: https://kapeli.com/cheat_sheets/Font_Awesome.docset/Contents/Resources/Documents/index */
	/* Some more: https://fontawesome.com/v5/cheatsheet/free/solid */
.togglecheckbox{
	background:none !important;
	position:relative;
	-webkit-appearance:none;
	appearance:none;
	outline:none;
	border-radius:var(--border-radius);
	transition:.5s;
	/*box-shadow: inset 0 0 0.2em rgba(0,0,0,0.2);*/
	width:2em !important;
	height:2em !important;
	cursor:pointer;
	vertical-align:middle;
}
.togglecheckbox:hover{
	background: var(--color-bg-1) !important;
}
.togglecheckbox:checked[type=checkbox]{
	background-color: var(--color-accent-1) !important;
}
.togglecheckbox:before{ /* icon */
	font-family: 'Font Awesome 5 Free';
	content:attr(data-icon);
	position:absolute;
	text-align:center;
	width:100%;
	height:100%;
	border-radius:var(--border-radius);
	top:0;
	left:0;
	transition:.5s;
	transform:translate(0,20%);
	/*box-shadow: 0 0.2em 0.2em rgba(0,0,0,0.2);*/
}
.togglecheckbox:checked:before{
	color:var(--color-text-strong-reverse);
}
.togglecheckbox:hover:after{ /* hover explanation */
	position:absolute;
	top:130%;
	left:0;
	content:attr(data-explanation);
	color:var(--color-text-strong);
	text-shadow:0.04em 0.04em 0em var(--color-text-strong-reverse);
	font-size:0.7em;
}


p.explanation{
	font-size:0.8em;
	font-style: italic;
	margin-top:0;
	color:var(--color-text-weak);
	line-height:1.5em;
	padding-top:0.4em;
}
	/* checkboxes formatted with checkmark if inside a label with powercheckbox class */
	/* must also have a span with checkmark <span>&#10004;</span>next to the input. both are inside the label */
.powercheckbox{ cursor:pointer; }
.powercheckbox input{ display:none; }
.powercheckbox span{
	display:inline-block;
	width:1.6em;
	height:1.6em;
	border: 1px solid var(--color-lines);
	border-radius: var(--border-radius);
	background-color: var(--color-bg-1);
	transition:0.2s;
	color:rgba(0,0,0,0); /* hide checkmark */
	text-align:center;
}
.powercheckbox input:checked ~ span{
	border:1px solid var(--color-accent-2) !important;
	box-shadow: 0 0 1em 0 var(--color-accent-2); /*glow*/
	background-color: var(--color-accent-1);
	color:var(--color-text-strong-reverse); /* show*/
}

/** BUTTONS ***************************************************************************/
.button, button{
	cursor: pointer;
	font:inherit; /* font in button doesn't inherit... */
	display:inline-block;
    padding: 1em 1.4em;
    border-radius: 0.5em;
    border: 1px solid var(--color-lines);
    background-color: var(--color-bg-1);
    color: var(--color-text-normal);
	transition:0.2s;
}
.button:hover, button:hover{
    background-color: var(--color-bg-2);
}
.button:focus, button:focus{
	outline: none !important;
	border:1px solid var(--color-accent-2) !important;
	box-shadow: 0 0 1em 0 var(--color-accent-2); /*glow*/
}

/** BARS (top header, footer, anywhere) ***************************************************************************/
.pstopbar{
	display:flex;
	/* justify-content: space-between;  push it to the right */
	align-items: center; /* Vertical center alignment */
	background-color: var(--color-accent-2);
	height:var(--topbar-height);
}
.pstopbar .logo{
	display:inline-block;
	height:var(--topbar-height);
	margin-left:1em;
}
.pstopbar .logo img{
	display:block;
	height:var(--topbar-height);
}

/** UI **************************************************/
/* psdropdown................ */
.psdropbtn {
	display:flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-accent-2);
	color: var(--color-text-strong-reverse);
	/*padding: 0.7em 1em;*/
	font-size: var(--pixel-text-size);
	border: none;
	cursor: pointer;
	border-radius:var(--border-radius);
	padding-right:1em;
	height: var(--topbar-height);
}
.psdropbtn img{
	width:2.5em;
	height:2.5em;
	border-radius:50%;
	margin:0.3em 0 0.3em 0.3em;
}
.psdropbtn .username{
	overflow:hidden;
	max-width:10em;
	white-space: nowrap;
	margin-left:0.5em;
}
@media(max-width:500px){
  .psdropbtn .username{
	  display:none;
  }
  .psdropbtn i{
	  display:none;
  }
}

.psdropbtn:hover, .psdropbtn:focus {
  background-color: var(--color-accent-1) !important;
  color: var(--color-text-strong-reverse) !important;
}

.psdropdown {
  position: relative;
  margin-left:auto; /* push to right*/
  /*float: right;
  display: inline-block;*/
}

.psdropdown-content {
	font-size:var(--pixel-text-size);
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  max-width:80%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 0;
  z-index: 188;
}

.psdropdown-content a { /* as a flex box */
  color: var(--color-text-normal);
  padding: 0.8em 1em;
  text-decoration: none;
  display: flex;
  align-items: center; /* Vertical center alignment */
}
.psdropdown-content a * { /*the children have some margin on the right*/
	margin-right:1em;
}
.psdropdown-content i { /*side icon*/
	color:var(--color-accent-2);
	width:1em;
}

.psdropdown a:hover {background-color: #ddd;}

.show {display: block;}

/* pssidenav................ */
.pssidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 195;
  top: 0;
  left: 0;
  background-color: var(--color-bg-2);
  overflow-x: hidden;
  transition: 0.2s;
  padding-top: 2.2em;
}

.pssidenav a {
  padding: 0.6em 0.3em 0.6em 1.3em;
  text-decoration: none;
  font-size: 1.2em;
  color: var(--color-text-1);
  display: block;
  transition: 0.3s;
	width:440px;
	max-width:100%;
	margin:auto;
}
.pssidenav i { /*side icon*/
	color:var(--color-accent-2);
	width:1em;
	margin-right:1em;
}

.pssidenav a:hover{
  color: var(--color-accent-1);
  background-color: var(--color-bg-1);
}

.pssidenav .closebtn {
  position: absolute;
  top: 0;
  right: 1em;
  font-size: 2.1em;
  margin-left: 2em;
  padding: 0.5em 0 !important;
  width:2em !important;
  text-align:center;
}
.pshamburger{
	cursor:pointer;
	display:inline-block;
	color:var(--color-text-strong-reverse);
	padding:0 0.5em;
	font-size:1.5em;
}
.pssidenavInside{
	height:100%;
	width:100%;
	overflow:auto;
	/* scrollbar hiding */
	/*-ms-overflow-style: none;  /* IE and Edge */
	/*scrollbar-width: none;  /* Firefox */
}
/*.pssidenavInside::-webkit-scrollbar {  display: none; }	/* scrollbar hiding for chrome/opera/safari */

@media screen and (max-height: 450px) {
}


/** LAYOUT ELEMENTS ***************************************************************************/
.panel-hori{
	padding:0 6%;
	/*border:1px solid;*/
}

.minipanel{ /* can have a header too */
	font-size: var(--pixel-text-size);
	line-height:1.9em;
	background:var(--color-bg-2);
	border:1px solid var(--color-border-2);
	border-radius:var(--border-radius);
}
.minipanelhead{
	display:flex;
    align-items: center; /* Vertical center alignment */
	justify-content: space-between;  /* push it to the right */
	padding: 1em 2em;
	font-size:1.5em;
	font-weight:bold;
	background:var(--color-accent-ui-1);
	color:var(--color-accent-1);
}
.minipanelbody{
	padding: 1.5em 3em;
}
@media(max-width:400px){
	.minipanelbody{
		padding: 1.5em 1.5em;
	}
}


/** PAGE/ARTICLE CSS (different from default layout elements) ***************************************************************************/
.pageArticle { line-height:1.8em; }

.pageArticle h1, 
.pageArticle h2, 
.pageArticle h3, 
.pageArticle h4, 
.pageArticle h5, 
.pageArticle h6{
	border:0px solid;
	text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.2);
	margin:0.8em 0 0.2em 0;
	line-height:1.5em;
	font-family:var(--font-2);
}
.pageArticle h1 {font-size:2em;}
.pageArticle h2 {font-size:1.6em;}
.pageArticle h3 {font-size:1.4em;}
.pageArticle h4 {font-size:1.2em;}
.pageArticle h5 {font-size:1.1em;}
.pageArticle h6 {font-size:1.05em;}

/** Headings for Misc purposes and multiple types of tags *************************/
.heading-type-1{
	font-size:1.2em;
	color:var(--color-text-strong);
	display:block;
	padding:0;
	margin:2em 5% 1em 5%;
	border-bottom: 1px solid var(--color-lines);
	font-family:var(--font-2);
}

/** Cards (or listing page) *************************/
.cardbox{ /*entire flex holder*/
	width:100%;
	max-width:1500px;
	margin:auto;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: center;
}
.card {
	border-radius:1em; perspective: 1px; overflow: hidden; /* for round border */
	display: block;
	box-shadow: 0.2em 0.2em 0.4em 0 rgba(0, 0, 0, 0.2);
	transition: 0.2s;
	width: 31%;
	margin: 1%; /*make sure total margin*2+width can repeatedly fit 100% or 99%*/
}
.card:hover {
  box-shadow: 0.4em 0.4em 0.8em 0 rgba(0, 0, 0, 0.2);
}
.card img{ /*top image*/
	width:100%;
}
.card div{ /*text part*/
  padding: 1em;
}
.card p { /*title*/
  font-family:var(--font-2);
  font-size:1.4em;
  margin:0;
  padding:0;
/*   line-height: 20px !important;
  font-size: 18px !important;
  font-weight: 500 !important; */
}
.card span { /*desc*/
	font-size:0.8em;
  line-height: 0em;
  opacity:0.7;
}
.card small{ /*date*/
	font-size:0.7em;
  display:block;
  text-align:right;
  opacity:0.6;
}
/* add card a link if necessary */

@media (max-width:950px){ /*double cards for smaller screens*/
	.card {	width: 47%;	margin:1%;}
}
@media (max-width:500px){ /*double cards for smaller screens*/
	.card {	width: 97%; margin:1%;}
}

/** Feature Panels *************************/
.featurePanels{
	
  display: grid;
  height: 60vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "fp_1 fp_1 fp_2"
	"fp_1 fp_1 fp_3"
	"fp_4 fp_5 fp_6";
  grid-gap: 0.2rem;
}
.featurePanel{
	border-radius:1em; perspective: 1px; overflow: hidden; /* for round border */
	display: block;
	box-shadow: 0.2em 0.2em 0.4em 0 rgba(0, 0, 0, 0.2);
	transition: 0.2s;
	margin: 1%; /*make sure total margin*2+width can repeatedly fit 100% or 99%*/
	position:relative;
	background-color:#222;
}
.featurePanel:hover{
	transform:scale(102%);
}
.featurePanel img{
	width:100%;
	position:absolute;
}
.featurePanel div{
	width:100%;
	position:absolute;
	background: rgba(0,0,0,0.5);
	bottom:0;
	padding:1em;
}
.featurePanel p { /*title*/
	color:#fff;
  font-family:var(--font-2);
  font-size:1em;
  margin:0;
  padding:0;
/*   line-height: 20px !important;
  font-size: 18px !important;
  font-weight: 500 !important; */
}
.featurePanel span {
    color: #eee;
    font-size: 0.7em;
    line-height: 1.1em;
    opacity: 0.7;
    display: block;
}
.featurePanel small{ /*date*/
	color:#ddd;
	font-size:0.7em;
  display:block;
  text-align:right;
  opacity:0.6;
}


/** MODULES (different from default layout elements) ***************************************************************************/

/*-- Hero Feature and Jumbotron --*/
.hero{  
	width:100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	font-size:0.8em;
}
.jumbotron{
  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.1)), url("../img/pikachu_libre.jpg");
	padding:10em 0;
}

.jumbotron .jumbotronInside{
	width: 80%;
  /*text-align: center;*/
  color: white;
  margin:auto;
  border-left:1em solid var(--color-accent-1);
  padding:0 5%;
  
}

.jumbotron .bigText{
	font-family:var(--font-2);
	font-size:2.2em;
	margin:0;;
	line-height:1em;
}
@media (min-width:500px){ .jumbotron .bigText{	font-size:3.2em;	} }

.jumbotron .smallText{
	opacity:0.8;
	font-size:1em;
}

.jumbotron button {
	font-size:0.8em;
	background-color:var(--color-text-blue);
	border:0;
	color:var(--color-text-strong-reverse);
	font-weight:bold;
	
}
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6{
	margin:0;
	
}
@media (min-width:500px){
	.hero h1 {font-size:3em;}
	.hero h2 {font-size:2.6em;}
	.hero h3 {font-size:2.4em;}
	.hero h4 {font-size:2.2em;}
	.hero h5 {font-size:2.1em;}
	.hero h6 {font-size:2.05em;}
}

.herobutton{
	cursor: pointer;
	font:inherit;
	font-weight:bold;
	display:inline-block;
    border-radius: 0.5em;
	transition:0.2s;
    padding: 0.7em 1.4em;
	margin-bottom:0.2em;
}

/* --- Hero Button Styles --- */
	/* 1 */
.herobutton1light{    
	border: 0.2em solid var(--color-text-white);
    padding: 0.5em 1.2em; /* less padding because of border */ 
    color: var(--color-text-white) !important;
}
.herobutton1light:hover{ transform:scale(110%); }
.herobutton1dark{    
	border: 0.2em solid var(--color-text-black);
    padding: 0.5em 1.2em; /* less padding because of border */
    color: var(--color-text-black) !important;
}
.herobutton1dark:hover{ transform:scale(110%); }
	/* 2 */
.herobutton2light{
	background-color: var(--color-text-white);
    color: var(--color-text-black) !important;
}
.herobutton2light:hover{ transform:scale(110%); }
.herobutton2dark{
	background-color: var(--color-text-black);
    color: var(--color-text-white) !important;
}
.herobutton2dark:hover{ transform:scale(110%); }


/** MEDIA FOR PAGES and ARTICLES ***************************************************************************/
.mediaImage{ max-width:100%; display:block;}
.mediaAudio{ width:100%; display:block;}
.video-container {	position: relative;	padding-top: 30px;	height: 0;	overflow: hidden;	margin:1em auto 1em auto;
	padding-bottom: 56.25%;}
.video-container video,  
.video-container iframe,  
.video-container object,  
.video-container embed {	position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}


/** ADDON CLASSES FOR FREQUENTLY USED ELEMENTS ***************************************************************************/
/*height padders, add to an hr as class*/
.height-padder-02, .hp02{ height:0.2em; border:0;}
.height-padder-04, .hp04{ height:0.4em; border:0;}
.height-padder-06, .hp06{ height:0.6em; border:0;}
.height-padder-08, .hp08{ height:0.8em; border:0;}
.height-padder-1, .hp1{ height:1em; border:0;}
.height-padder-1-5, .hp1-5{ height:1.5em; border:0;}
.height-padder-2, .hp2{ height:2em; border:0;}

.text-green{ color:var(--color-text-green); font-weight:bold; }
.text-red{ color:var(--color-text-red);  font-weight:bold; }
.text-blue{ color:var(--color-text-blue);  font-weight:bold; }
.text-orange{ color:var(--color-text-orange);  font-weight:bold; }
.text-purple{ color:var(--color-text-purple); font-weight:bold; }
.text-pink{ color:var(--color-text-pink); font-weight:bold; }

.clearer { clear:both; }

hr.divider{
	border-top:1px solid var(--color-text-weak);
	width:80%;
	opacity: 0.4;
}
hr.divider-reverse{
	border-top:1px solid var(--color-text-weak-reverse);
	width:80%;
	opacity: 0.4;
}

.pslinkshorizontal a{ /* a bunch of a inside a div with this class */
	display:inline-block;
	padding:0.6em;
}

.small-text{ 
	color: var(--color-text-weak);	
	font-size:var(--pixel-text-size-2); 
	line-height: 1.5em;
	display: block;
}

.errorBox{
	background-color: var(--color-text-red);
	color: white;
	z-index:1555;
}

.successBox{
	background-color: var(--color-text-blue);
	color: white;
	z-index:1556;
}
.fixedBox{
	position:fixed;
	bottom:0.5em;
	display:block;
	box-sizing:border-box;
	font-size:var(--pixel-text-size);
	padding:1em;
	width:90%;
	border-radius: var(--border-radius);
	margin:0 auto 0.5em auto;
}
.fixedBox:after{
	content:'x';
	position:absolute;
	right:0;
	padding-right:1.3em;
}
.hiddenBox{
    visibility:hidden;
}


.textAlignCenter{ text-align:center}


/** CUSTOMS ******************************************************************/
/* designs for custom sections */
	/* logo Header */
.logoHeader{
	padding:2em;
	text-align:center;
}
.logoHeader img{
	width:20vh;
}
@media(orientation:portrait){
	.logoHeader img{
		width:20vw;
	}
}
	/* registration form */
.registrationForm{
	width:90%;
	max-width:30em;
	/*background-color:var(--color-bg-2);*/
	/*border:0.01em solid var(--color-text-weak);*/
	padding:1em;
	margin:auto;
}


/* dashboard stuff */
.dashboardNarrow{
	max-width:800px;
	margin:auto;
}
.dashboardProfile {
	text-align:center;
}
.dashboardProfile .pic{
	width:8em;
	height:8em;
	border-radius:50%;
	border:0.3em solid var(--color-lines);
}
.dashboardProfile .firstlastname{
	font-size:2em;
	font-weight:bold;
}
.dashboardProfile .smalltext{
	font-size:0.85em;
    line-height: 1.3em;
}
.dashboardProfile hr{
	margin:0 auto;
	width:inherit !important;
}
.dashboardProfile .particular{
	text-align:left;
}
.dashboardProfile .particular span{
	font-size:0.9em;
	font-weight:bold;
	display:block;
	line-height:1.3em;
}
.avatarGallery{
	text-align:center;
}
.avatarGallery .galleryImage{
	width:8em;
	border-radius:50%;
	margin:1em;
}
.avatarGallery input[type=radio]{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.avatarGallery input[type=radio]:checked+label{
	border:0.6em solid var(--color-accent-2);
}
.avatarGallery label{ 
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
	width:8em;
	height:8em;
	border-radius:50%;
	margin:1em;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
	margin-left: 7px;
}
.avatarGallery label:hover{ 
    -webkit-filter: grayscale(.5) opacity(.9);
       -moz-filter: grayscale(.5) opacity(.9);
            filter: grayscale(.5) opacity(.9);
}


/*******************************
ANIMOK ANIMATION CLASSES
*******************************/

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.bounce-in-top{-webkit-animation:bounce-in-top 1.1s both;animation:bounce-in-top 1.1s both}
@-webkit-keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}