/*!
 * css uitility
 * v.1.3 adding stroke (shadow around the text)
 * v.1.2 adding css shapes
 * the name ..._noimportant means that is should be used in the last link of css because it has used no "important" in styles
 * 
 * 
 */

 /* -------------------------- */
 /* start of background-colors */
 /* -------------------------- */
.bg-red {
  background-color: red;
}

.bg-blue {
  background-color: blue;
}

.bg-yellow {
  background-color: yellow;
}

.bg-violet {
  background-color: violet;
}

.bg-green {
  background-color: green;
}

.bg-orange {
  background-color: orange;
}

.bg-gray {
  background-color: gray;
}

.bg-black {
  background-color: black;
}

.bg-white {
  background-color: white;
}

.bg-darkred {
  background-color: darkred;
}

.bg-darkblue {
  background-color: darkblue;
}

.bg-darkyellow {
  background-color: #909000;
}

.bg-darkviolet {
  background-color: darkviolet;
}

.bg-darkgreen {
  background-color: darkgreen;
}

.bg-darkorange {
  background-color: #df9100;
}

.bg-darkgray {
  background-color: #606060;
}

.bg-lightred {
  background-color: #ff8080;
}

.bg-lightblue {
  background-color: lightblue;
}

.bg-lightyellow {
  background-color: #ffff80;
}

.bg-lightviolet {
  background-color: #eec0ee;
}

.bg-lightgreen {
  background-color: lightgreen;
}

.bg-lightorange {
  background-color: #fcd080;
}

.bg-lightgray {
  background-color: lightgray;
}
 /* ------------------------ */
 /* end of background-colors */
 /* ------------------------ */

 /* ---------------------- */
 /* start of image-helpers */
 /* ---------------------- */
 .aspect-ratio {
  background-color: gray;
  padding-bottom: 100%;
  /* to keep height according to width (padding-top/bottom percent set according to width) */
}
/* start of change image on hover */
a.hovertoggle img:last-child {
  display: none;
}

a.hovertoggle:hover img:last-child {
  display: block;
}

a.hovertoggle:hover img:first-child {
  display: none;
}

a.hovertoggle .show {
  display: block;
}

a.hovertoggle .hide {
  display: none;
}
/* end of change image on hover */

 /** imgframe */
 .box-imgframe {
  position: relative;
  width: 100%;
  overflow: hidden;
}
 .box-imgframe-aspect-ratio {
  background-color: gray;
  padding-bottom: 100%;
  /* to keep height according to width (padding-top/bottom percent set according to width) */
}
.cover-normal{
  min-height: 100%;
  min-width: 100%;
}
.fulldim-normal{
  max-width: 100%;
  max-height: 100%;
}
.center-absolute{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
 /* -------------------- */
 /* end of image-helpers */
 /* -------------------- */
 
 /* ------------------- */
 /* start of css shapes */
 /* ------------------- */
 .square {
  height: 50px;
  width: 50px;
  background-color: #555;
}
.circle {
  height: 50px;
  width: 50px;
  background-color: #555;
  border-radius: 50%;
}
.triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #555;
}
.triangle-down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid #555;
}
.triangle-left {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #555;
	border-bottom: 25px solid transparent;
}
.triangle-right {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #555;
	border-bottom: 25px solid transparent;
}
.oval {
  height: 50px;
  width: 100px;
  background-color: #555;
  border-radius: 50%;
}
.trapezoid {
	border-bottom: 50px solid #555;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 125px;
}
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #555;
}
.parallelogram {
	width: 100px;
	height: 50px;
	transform: skew(20deg);
	background: #555;
}
.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
 /* ----------------- */
 /* end of css shapes */
 /* ----------------- */
 /* ---------------------------- */
 /* start of css links (tag <a>) */
 /* ---------------------------- */
/* unvisited link, visited link, mouse over link, link the moment it is clicked */
a.link-fixedcolor:link,
a.link-fixedcolor:visited,
a.link-fixedcolor:hover,
a.link-fixedcolor:active {
  color: #626262;
}

 /* -------------------------- */
 /* end of css links (tag <a>) */
 /* -------------------------- */
 /* -------------------- */
 /* start of text styles */
 /* -------------------- */
 
 .stroke-black {
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black,
    -1px -1px black, 1px 1px black, 1px -1px black, -1px 1px black;
}

.stroke-white {
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white,
    -1px -1px white, 1px 1px white, 1px -1px white, -1px 1px white;
}

.quote {
  margin: 0 auto;
  width: 85%;
  padding: 50px 32px;
  border-left: 5px solid red;
  border-right: 5px solid red;
  border-radius: 32px;
  text-align: center;
  color: red;
  font-size: 24px;
}

.quote-white {
  margin: 0 auto;
  width: 75%;
  padding: 50px 32px;
  border-left: 7.5px solid white;
  border-right: 7.5px solid white;
  border-radius: 48px;
  text-align: center;
  color: white;
  /* font-size: 24px; */
}
 
 /* ------------------ */
 /* end of text styles */
 /* ------------------ */