@import url("fonts.css");

body {
	background: rgba(150, 186, 57, 1);
	background: rgba(54, 79, 26, 1);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #fff;
	line-height: 1.5rem;
	font-size: 1.1rem;
}

body.overflow {
  overflow: hidden;
}

.sf-minitoolbar,
.sf-toolbar {
	display: none !important;
}

a,
a:focus,
a:visited {
	color: #fff;
	text-decoration: none;
	border-bottom: solid 1px #fff;
}

a:hover {
	color: #bbb;
}

strong, b {
	color: inherit;
	font-weight: 600;
}

em, i {
	font-style: italic;
}

p {
	margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #fff;
	font-weight: 500;
	line-height: 1em;
	margin: 0 0 0.5em 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	border: 0;
}

h1 {
	font-size: 1.5em;
	line-height: 1.5em;
	background: rgba(150, 186, 57, 0.4);
	display: block;
	color: #fff;
	padding: 2px 10px;
	text-transform: none;
	margin-bottom: 1em;
}

h2 {
	font-size: 1.4em;
	line-height: 1.5em;
	border-bottom: solid 2px rgba(150, 186, 57, 0.4);
	padding: 2px 0;
}

h3 {
	font-size: 1.35em;
	line-height: 1.5em;
}

h4 {
	font-size: 1.1em;
	line-height: 1.5em;
}

h5 {
	font-size: 0.9em;
	line-height: 1.5em;
}

h6 {
	font-size: 0.7em;
	line-height: 1.5em;
}

sub {
	font-size: 0.8em;
	position: relative;
	top: 0.5em;
}

sup {
	font-size: 0.8em;
	position: relative;
	top: -0.5em;
}

hr {
	border: 0;
	border-bottom: solid 1px rgba(255, 255, 255, 0.3);
	margin: 2em 0;
}

blockquote {
	border-left: solid 4px rgba(255, 255, 255, 0.3);
	font-style: italic;
	margin: 0 0 2em 0;
	padding: 0.5em 0 0.5em 2em;
}

code {
	background: rgba(255, 255, 255, 0.075);
	border-radius: 4px;
	font-family: "Courier New", monospace;
	font-size: 0.9em;
	margin: 0 0.25em;
	padding: 0.25em 0.65em;
}

pre {
	-webkit-overflow-scrolling: touch;
	font-family: "Courier New", monospace;
	font-size: 0.9em;
	margin: 0 0 2em 0;
}

pre code {
	display: block;
	line-height: 1.75em;
	padding: 1em 1.5em;
	overflow-x: auto;
}

.nojs {
	position: fixed;
	top: 3em;
	width: 100%;
	z-index: 10000;
	background: rgba(193, 29, 29, 0.7);
	color: #fff;
	text-align: center;
	line-height: 3em;
	height: 3em;
}

/* --- */

header {
  background: rgba(255, 255, 255, 1);
  text-align: center;
	max-height: 250px;
	min-height: 70px;
}

header img {
	max-height: 200px;
}

header p {
	color: #fff;
	position: relative;
	margin: 0 0 1.5em 0;
}

header h2 + p {
	margin-top: -1em;
	line-height: 1.75em;
}

header h3 + p {
	margin-top: -0.8em;
	line-height: 1.75em;
}

header h4 + p,
header h5 + p,
header h6 + p {
	margin-top: -0.6em;
	line-height: 1.5em;
}

section {
  
}

.images,
.images:visited,
.images:focus,
.images:active {
  border: 0;
}

/* Footer */

#footer {
	background: #000;
	padding: 1em 0;
	text-align: center;
}

#footer a,
#footer a:visited,
#footer a:focus {
	color: #fff;
  border: none;
}

#footer a:hover {
	color: #cccc00;
}

/* --- */

ul {
  list-style-type: disc;
  margin: 1em 0;
  margin-left: 20px;
}

.image {
  border: 0;
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 1em;
}

.image.fit {
  display: block;
  margin: 0 0 1em 0;
  max-width: 100%;
}

.vid {
  border: solid 4px #fff;
  width: 100% !important;
  height: auto !important;
  max-width: 600px;
}

/* nav */

nav.desk {
  position: relative;
  display: block;
  vertical-align: bottom;
  text-align: center;
	width: 100%;
	background: rgba(150, 186, 57, 1);
  z-index: 10;
	margin-bottom: 4em;
}

nav.desk ul {
  list-style: none;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
	display: inline-block;
}

nav.desk ul li {
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
  float: left;
  padding: 0;
}

nav.desk ul a,
nav.desk ul a.visited {
  -webkit-transition: background-color .3s;
  transition: background-color .2s;
  font-size: 1.1rem;
	font-weight: bold;
  color: #fff;
  display: block;
  padding: 0 1em;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 3em;
  background: transparent;
  white-space: nowrap;
  border-bottom: none;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

nav.desk ul a:hover,
nav.desk ul a.here,
nav.desk ul a.mainactive {
  background: rgba(255, 255, 255, 0.8);
  color: #333;
}

nav.desk li a:after {
  font-family: icomoon;
  content: " \ea43";
}

nav.desk li a:only-child:after {
  content: "";
}

nav.desk ul li ul {
  display: none;
}

nav.desk ul li:hover ul {
  display: block;
  position: absolute;
}

nav ul li ul li {
  position: relative;
  display: block;
  float: none !important;
}

nav.desk ul li ul li a {
  background: #333;
  color: #fff;
  font-size: 90%;
  width: 100%;
}

nav.desk ul li ul li ul,
nav.desk ul li ul li ul li {
  display: none;
}

nav.desk ul li ul li:hover ul,
nav.desk ul li ul li:hover ul li {
  display: block;
}

nav.desk ul li ul li:hover ul {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}

nav.desk ul li ul li ul li a {
  background: #990000;
  color: #fff;
  font-size: 90%;
  width: 100%;
}

/* nav mobile */

nav.mobile {
  background-color: rgba(150, 186, 57, 1);
  position: fixed;
  z-index: 49;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 300px;
  width: 100%;
  padding: 40px 20px 40px 10px;
  overflow-y: auto;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

nav.mobile.show {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}

nav.mobile.show ul.main li {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
  opacity: 1;
}

nav.mobile.show ul.main li:nth-child(1) {
  transition-delay: 0.1s;
}

nav.mobile.show ul.main li:nth-child(2) {
  transition-delay: 0.2s;
}

nav.mobile.show ul.main li:nth-child(3) {
  transition-delay: 0.3s;
}

nav.mobile.show ul.main li:nth-child(4) {
  transition-delay: 0.4s;
}

nav.mobile.show ul.main li:nth-child(5) {
  transition-delay: 0.5s;
}

nav.mobile.show ul.main li:nth-child(6) {
  transition-delay: 0.6s;
}

nav.mobile.show ul.main li:nth-child(7) {
  transition-delay: 0.7s;
}

nav.mobile.show ul.main li:nth-child(8) {
  transition-delay: 0.8s;
}

nav.mobile.show ul.main li:nth-child(9) {
  transition-delay: 0.9s;
}

nav.mobile.show ul.main li:nth-child(10) {
  transition-delay: 1.0s;
}

nav.mobile.show ul.main li:nth-child(11) {
  transition-delay: 1.1s;
}

nav.mobile.show ul.main li:nth-child(11) {
  transition-delay: 1.2s;
}

nav.mobile.show ul.main li:nth-child(12) {
  transition-delay: 1.3s;
}

nav.mobile.show ul.sub {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  transition-delay: .85s;
}
  
nav.mobile ul.main {
  list-style-type: none;
}

nav.mobile ul.main li {
  margin-bottom: 5px;
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
  transform: translateX(40px);
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

nav.mobile ul.main li:last-of-type {
  margin-bottom: 0px;
}

nav.mobile ul.main li a {
  color: #fff;
  font-family: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: inherit;
  display: block;
  font-weight: 600;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
  border-bottom: none;
}

nav.mobile ul.main li a span {
  color: #b7ac7f;
}

nav.mobile ul.main li a:hover {
  color: #333;
}

nav.mobile ul.sub {
  list-style-type: none;
  margin-top: 0;
  margin-left: 3%;
  -webkit-transform: translateY(30px);
  -moz-transform: translateY(30px);
  -ms-transform: translateY(30px);
  -o-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

nav.mobile ul.sub li {
  margin-bottom: 0;
}

nav.mobile ul.sub li:last-of-type {
  margin-bottom: 0;
}

nav.mobile ul.sub li a {
  color: #ddd;
  font-family: inherit;
  letter-spacing: 1px;
  font-size: inherit;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

nav.mobile ul.sub li a:hover {
  color: #ff8040;
}

/*  burger */

.burger {
  display: none;
}

.burger {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0.5em;
  right: 1em;
  border-radius: 4px;
  z-index: 50;
	background: rgba(0, 0, 0, 0.8);
}

.burger span {
  position: relative;
  margin-top: 9px;
  margin-bottom: 9px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15px;
  margin-top: -1.5px;
}

.burger span,
.burger span:before,
.burger span:after {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #fff;
  outline: 1px solid transparent;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.burger span:before,
.burger span:after {
  position: absolute;
  content: "";
  display: block;
}

.burger span:before {
  top: -9px;
}

.burger span:after {
  top: 9px;
}

.burger.clicked span {
  background-color: transparent;
}

.burger.clicked span:before {
  -webkit-transform: translateY(9px) rotate(45deg);
  -moz-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  -o-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}

.burger.clicked span:after {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -moz-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  -o-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}

.burger.clicked span:before,
.burger.clicked span:after {
  background-color: #fff;
}

.burger:hover {
  cursor: pointer;
}

/* media queries */

@media only screen and (max-width: 930px) {
  
  .burger {
    display: block;
		position: fixed;
  }
  
  nav.desk,
  .footer,  
  .hide-on-med,
  .sticky-wrapper {
    display: none !important;
  }
  
  .show-on-med {
    display: block !important;
    width: 100%;
  }
  
  .header {
    padding-left: 20px;
    margin-bottom: 6px;
  }
	
	.container {
		margin-top: 4em;
	}
}

/* overlay */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
}

.overlay.show {
  opacity: 0.5;
  visibility: visible;
}

/* form */

form {
	padding: 1em 1em;
	color: #fff;
}

.form-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	padding: 1rem;
	margin: 0 auto;
	border-radius: 35px;
	border: 1px solid rgba(150, 186, 57, 0.7);
}

.form_widget {
	width: 100%;
}

.form_widget textarea {
	resize: vertical;
	background: #fff;
	color: #333;
}

.form-label {
	color: #fff;
}

div:has(>label) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

label {
	margin-top: 10px;
}

button {
	margin-top: 30px;
}

form * {
	font-family: inherit;
  color: #333;
}

form br {
	clear: both;
	content: "";
	display: block;
}

form ul {
  list-style-type: none;
  margin: 0;
}

form .row [class^="col"] {
  padding-left: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

label {
	color: #fff;
	display: block;
	margin: 0 0 1em 0;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
.button,
.submit {
	-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	background-color: #555;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	height: 3em;
	line-height: 3em;
	padding: 0 2.25em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
  margin: 1em 0;
	border-radius: 10px;
	margin-top: 2em;
}

input[type="submit"]:hover,
input[type="submit"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="button"]:hover,
input[type="button"]:active,
.button:hover,
.button:active,
.submit:hover {
	background-color: #888;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
.button:active {
	background-color: rgba(228, 76, 101, 0.15);
}

input[type="submit"].icon:before,
input[type="reset"].icon:before,
input[type="button"].icon:before,
.button.icon:before {
	margin-right: 0.5em;
}

input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.button.fit {
	display: block;
	margin: 0 0 1em 0;
	width: 100%;
}

input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
.button.small {
	font-size: 0.8em;
}

input[type="submit"].big,
input[type="reset"].big,
input[type="button"].big,
.button.big {
	font-size: 1.35em;
}

input[type="submit"].disabled,
input[type="submit"]:disabled,
input[type="reset"].disabled,
input[type="reset"]:disabled,
input[type="button"].disabled,
input[type="button"]:disabled,
.button.disabled,
.button:disabled {
	background-color: rgba(255, 255, 255, 0.3) !important;
	box-shadow: none !important;
	color: #ffffff !important;
	cursor: default;
	opacity: 0.25;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: border-color 0.2s ease-in-out;
	-webkit-transition: border-color 0.2s ease-in-out;
	-ms-transition: border-color 0.2s ease-in-out;
	transition: border-color 0.2s ease-in-out;
	background: #fff;
	border: solid 1px rgba(0, 0, 0, 0.8);
	color: #111;
	display: block;
	outline: 0;
	padding: 0 1em;
	text-decoration: none;
	width: 100%;
  margin-bottom: 1em;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
select:invalid,
textarea:invalid {
	box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color: #d1b800;
}

#error {
	color: #cc0000;
}

select {
	cursor: pointer;
}

.select-wrapper {
	text-decoration: none;
	display: block;
	position: relative;
}

.select-wrapper:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: fa;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
	color: rgba(0, 0, 0, 0.6);
	content: "\f107";
	font-size: 1rem;
	display: block;
	height: 3em;
	line-height: 3em;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 3em;
	z-index: 9;
}

select:focus::-ms-value {
	background-color: transparent;
}

.select-wrapper select::-ms-expand {
	display: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
select {
	height: 3em;
}

textarea {
	padding: 0.75em 1em;
}

select option {
	background-color: #fff;
	color: #111;
}

select:focus::-ms-value {
	background: transparent;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline;
  box-sizing: border-box;
  padding: 0;
}

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal;
  vertical-align: middle;
}

label.box {
  margin-bottom: 0;
}

label.box.leftfloat {
  margin-right: 1em;
}

::-webkit-input-placeholder {
	color: rgba(0, 0, 0, 0.5) !important;
	opacity: 1.0;
}

:-moz-placeholder {
	color: rgba(0, 0, 0, 0.5) !important;
	opacity: 1.0;
}

::-moz-placeholder {
	color: rgba(0, 0, 0, 0.5) !important;
	opacity: 1.0;
}

:-ms-input-placeholder {
	color: rgba(0, 0, 0, 0.5) !important;
	opacity: 1.0;
}

.formerize-placeholder {
	color: rgba(0, 0, 0, 0.5) !important;
	opacity: 1.0;
}

/* table */

.table-wrapper {
  overflow-x: auto;
}

table {
	margin-bottom: 20px;
	width: 100%;
  min-width: 800px;
	table-layout: fixed; /* auto */
	border-collapse: separate; /* collapse */
	border-spacing: 4px; /* nicht IE */
}

table caption {
	font-size: 110%;
	caption-side: top; /* bottom */
	margin: 0px 0px 4px 0px;
	color: #444;
}

table th {
	background: #000;
	color: #fff;
	font-weight: bold;
	border: solid thin transparent;
  padding: 4px 4px;
  text-align: left;
  font-style: italic;
}

table td {
	border: solid thin #ccc;
	vertical-align: top;
	padding: 4px 4px;
}

table td:hover {
	background: #fff;
}

table thead td {
	background: #226588;
	border: none;
}

table tbody tr:hover {
	background: #fff;
}

table tfoot td {
	background: #bbb;
  color: #fff;
}

/* iFrame embed */

.iframe-embed {
	position: relative; 
	padding-bottom: 56.25%; /* ratio 16x9 */
	height: 0; 
	overflow: hidden; 
	width: 100%;
	height: auto;
}

.iframe-embed iframe {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

	/* ratio 4x3 */
.iframe-embed.ratio4x3 {
	padding-bottom: 75%;
}

/* jquery.confirm */

.jconfirm.jconfirm-supervan .jconfirm-title,
.jconfirm.jconfirm-supervan div {
  color: #fff !important;
}

.jconfirm.jconfirm-supervan .jconfirm-bg {
  background-color: rgba(14, 10, 13, 0.85);
}

.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button {
  font-size: 16px;
  border-radius: 2px;
  background: #f6f6f6;
  text-shadow: none;
  border: none;
  color: #333;
  padding: 10px;
  min-width: 100px;
}

.jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button.btn-blue:hover {
  background-color: #000;
  color: #fff;
}

/* Flex-Panels (dieselbe Hoehe) */

#panel-container {
	width: 100%;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.panel-box {
	display: -webkit-flex; 
	display: -ms-flexbox; 
	display: flex;

	background: #111;
  width: 28%;
  min-width: 170px;
	padding: 6px 20px;
	float: left;
	margin: 10px;
	border: 2px solid #fff;
}

.panel-content h3 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 1em;
}

.panel-content p {
  color: #fff;
  font-size: 90%;
}

/* Audio */

audio {
  border: solid 1px #000;
  max-width: 100%;
  background: #000;
  font-size: 0.6rem;
}

/* Button BG-Effekt */

.sliding-bg {
	background: transparent;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	box-shadow: inset 0 0 0 0 #666;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}

.sliding-bg:hover {
	box-shadow: inset 0 100px 0 0 #666;
}

/* LeftSlide */
.slide-in {
  z-index: 100; /* to position it in front of the other content */
  position: absolute;
  overflow: hidden; /* to prevent scrollbar appearing */
	width: auto;
	top: 200px;
}

.slide-in.from-left {
  left: 0;
}

.slide-in.from-right {
  right: 0;
}

.slide-in-content {
  float: right;
	padding: 1em 2em;
  padding: 0;
	
  transition: all .3s ease; /* our nice transition */
}

.slide-in-content #toggle {
	float: left;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	background: #cc0000;
	padding: 10px 10px;
	position: relative;
	z-index: 200;
}

.slide-in-content #cont {
	float: right;
	background: #000;
	color: #fff;
	padding: 1em 1em;
}

.slide-in.from-left .slide-in-content {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.slide-in.from-right .slide-in-content {
  transform: translateX(68%);
  -webkit-transform: translateX(68%);
}

.slide-in.show .slide-in-content {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

/* Zoom */

.zoom-box {
  position: relative;
  overflow: hidden;
  border: solid 1px #ccc;
  width: 200px;
  height: 200px;
}

.zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* Loader */

.loader {
  border: solid 10px transparent; 
  border-top: solid 10px #000;
  border-bottom: solid 10px #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1.6s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#saving {
  vertical-align: middle;
  margin-right: 1em;
  display: none;
}

.bn {
  margin-right: 12px;
}

/* Image Flip-Over */

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  position: relative;
  background-color: transparent;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
  /* perspective: 1000px; */ /* Remove this if you don't want the 3D effect */
}

.flip-card img {
  width: 200px;
  height: 200px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: #fff;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: #fff !important;
  transform: rotateY(180deg);
}

/* Image Overlay */

.overlay-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.overlay-box:hover .image-overlay {
  height: 100%;
}

.overlay-text * {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Image blur/greyscale */

.blur-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.blur-box img {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}

.blur-box:hover img {
  -webkit-filter: blur(0); /* Safari 6.0 - 9.0 */
  filter: blur(0);
}

.gray-box {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}

.gray-box img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.gray-box:hover img {
   -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
  filter: grayscale(0);
}

#col2 img {
	border-radius: 14px;
}

.alert {
	width: 100%;
	padding: 12px 16px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 12px;
	font-size: 16px;
}

.alert.alert-success {
	background-color: rgba(227, 253, 235, 1);
	border-color: rgba(38, 179, 3, 1);
	color: rgba(60, 118, 61, 1);
}

.alert.alert-info {
	background-color: rgba(217, 237, 247, 1);
	color: rgba(49, 112, 143, 1);
    border-color: rgba(126, 182, 193, 1);
}


.alert.alert-warning {
	background-color: rgba(252, 248, 227, 1);
	border-color: rgba(177, 161, 129, 1);
	color: rgba(138, 109, 59, 1);
}

.alert.alert-danger {
	background-color: rgba(248, 215, 218, 1);
	border-color: rgba(220, 53, 69, 1);
	color: rgba(114, 28, 36,1);
}