/**************/
/* Typografie */
/**************/

/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v28-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-800 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-weight: 700;
  src: url('../fonts/raleway-v28-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-800.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-300italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/raleway-v28-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-300italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/raleway-v28-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-800italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 800;
  font-weight: 700;
  src: url('../fonts/raleway-v28-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/raleway-v28-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v28-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v28-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v28-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v28-latin-800italic.svg#Raleway') format('svg'); /* Legacy iOS */
}



/**************/
/* Generelles */
/**************/

html {
	font-size: 100%;
	--color-text: #383835;
}

body {
	font-family: 'Raleway', sans-serif;
	font-size: 0.9rem;
	color: var(--color-text, #383835);
}
@media (min-width: 992px) {
	body { font-size: 0.95rem; }
}
@media (min-width: 1600px) {
	body { font-size: 1.05rem; }
}

h1, h2, h3, h4, h5, h6, b, strong, .font-bold {
	font-weight: 800;
	word-wrap: break-word;
}

.font-light {
	font-weight: 300;
}

.site-edge {
    height: 10px;
}
@media (min-width: 764px) and  (max-width: 1400px){
    .site-edge {
        height: 6px;
    }
}

/*************************/
/* Bootstrap Erweiterung */
/*************************/

.container-xxxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1920px) {
	.container-xxxl {
  		max-width: 1900px;
	}
}

@media (min-width: 1200px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
 		max-width: 1040px;
	}
}

@media (min-width: 1600px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  		max-width: 1320px;
	}
}

.g-4, .gx-4 {
  --bs-gutter-x: 2.6rem;
}
@media (min-width: 1600px) {
	.g-xxl-5, .gx-xxl-5 {
 		--bs-gutter-x: 4.4rem;
	}
	.pt-xxxl-5 {
  		padding-top: 4rem !important;
	}
}


/*********/
/* Menus */
/*********/

.navi {
	list-style-type: none;
    	font-size: 1.5em;
	padding: 0;
	margin: 0;
}
@media (min-width: 1200px) {
	.navi { font-size: 1.3em; }
}
@media (min-width: 1400px) {
	.navi { font-size: 1.4em; }
}

.navi a {
	text-decoration: none;
	color: #ffffff;
	text-transform: uppercase; 
}
.navi a:hover {
	text-decoration: underline;
}

#offcanvas-menu {
	width: 250px;
	border-right: 1px solid #333;
	/*opacity: 0.92;*/
}
#offcanvas-menu .navi {
	margin: 25px 0 0 30px;
}

.oncanvas {
	transition: margin-left linear .3s;
}
.oncanvas.slide-to-right {
	margin-left: 250px;
}
.offcanvas-backdrop.show {
  opacity: .1;
}

.navi.ordinary-menu {
	padding-top: 10px;
	z-index: 2000;
}

.ordinary-menu li {
     	padding: 0 0 2px 5px;
}

@media (min-width: 1400px) {
	.ordinary-menu li {
     		padding-bottom: 5px;
	}
}


/**********************/
/* Burger Menu Button */
/**********************/

.burger-menu {
  width: 34px;
  height: 28px;
  margin: 20px 5px 5px 5px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  border: none;
  background: none;
}

.burger-menu span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #ffffff;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.burger-menu span:nth-child(1) {
  top: 0px;
}

.burger-menu span:nth-child(2),.burger-menu span:nth-child(3) {
  top: 10px;
}

.burger-menu span:nth-child(4) {
  top: 20px;
}

.burger-menu.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.burger-menu.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.burger-menu.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.burger-menu.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}


/**********/
/* Header */
/**********/

.header-bar {
	color: #ffffff;
	padding-bottom: 6px;
	--svg-color: #fff;
}
@media (min-width: 992px) {
	.header-bar {
		padding-bottom: 14px;
	}
}

.contact-head {
	font-size: 0.86em;
	letter-spacing: 0.1em;
	white-space: nowrap;
	flex-wrap: wrap;
	padding-top: 6px;
}

@media (min-width: 992px) {
	.contact-head {	
		font-size: 1em; 
		flex-wrap: nowrap !important;
		padding-top: 20px;
	}
}

.contact-head .module {
	width: 100%;
	margin: 0 !important;
	flex-wrap: wrap;
}
@media (min-width: 992px) {
	.contact-head .module {
		flex-wrap: nowrap !important;
	}
}

.contact-head .icontext{
	padding: 0 !important;
	padding-bottom: 0 !important;
}
.contact-head .icontext span{
	font-weight: 400;
	font-size: 1em;
	padding: 0;
}

.contact-head .left-column,
.contact-head .middle-column {
	padding-right: 1.5rem;
	margin: 0 !important;
}

.contact-head a,
.contact-head a:visited,
.contact-head .icontext a,
.contact-head .icontext a:visited {
	color: #ffffff;
	text-decoration: none;
}
.contact-head a:hover,
.contact-head .icontext a:hover{
	color: #f0f0f0;
	text-decoration: none;
}
.contact-head a, .contact-head span {
	display: inline-block;
}

.socialmedia {
	height: 30px;
	width: 30px;
	display: inline-block;
	margin-top: 18px;
}
.social-fb {
	padding: 2px;
}

.icon,
.contact-head .icontext svg{
	height: 21px;
	width: 21px;
	margin: 0 !important;
	float: none !important;
	display: inline-block;
}
@media (min-width: 992px) {
	.icon, .contact-head .icontext svg {
		height: 24px;
		width: 24px;
	}
}

.header-logo {
	text-align: center;
}

.header-logo img {
	max-width: 400px;
	max-height: 120px;
}
@media (min-width: 1400px) {
	.header-logo img {
		max-width: 500px;
		max-height: 150px;
	}
}

.header-image {
	position: relative;
}
.header-image section {
	position: relative;
}
.header-image .color-strip {
	position: absolute;
	top: 0;
	width: 100%;
	height: 50%;
}


/***********/
/* Content */
/***********/

.content {
	--svg-color: #000;
}

.content section {
	position: relative;
}

.no-margin {
	padding: 0;
}

.big-margin, .small-margin {
	padding: 0 10px;
}

@media (min-width: 768px) {
	.big-margin { padding: 0 5%; }
	.small-margin { padding: 0 2%; }

}

@media (min-width: 992px) {
	.big-margin { padding: 0 12%; }
	.small-margin { padding: 0 6%; }
}

.anchor {
	border-top: 0.1em solid #111111;
	height: 2em;
}
@media (min-width: 992px) {
	.anchor {
		height: 3em;
	}
}

.content a {
	color: var(--color-text, #383835);
	padding-bottom: 2px;
	border-bottom: 1px solid;
	border-color: var(--color-text, #383835);
	text-decoration: none;
	font-weight: 800;
}
.content a:hover {
	color: #555555;
	border-color: #555555;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
	color: var(--color-text, #383835);
}

.content h4 {
    font-size: 1.5em; /* Hier die gewünschte Größe einfügen */
}



/***********/
/* Modules */
/***********/


@media (max-width: 768px) {
	.left-column,
	.right-column.order-first {
		margin-bottom: 20px;
	}
}

.module {
	margin-bottom: 2em;
}
@media (min-width: 992px) {
	.module {
		margin-bottom: 3em;
	}
}

.two-columns,
.headline-module {
	margin-top: 1em;
}
@media (min-width: 992px) {
	.two-columns,
	.headline-module {
		margin-top: 2em;
	}
}

.content .headline {
	font-size: 2em;
	line-height: 2rem;
	text-transform: uppercase;
	color: #1e1e1e;
	color: var( --color-primary, #1e1e1e );
}
.content .subline {
	font-size: 2em;
	line-height: 1.6rem;
	color: #1e1e1e;
	color: var(--color-text, #1e1e1e);
}

.button-row {
	gap: 2%;
}
@media (min-width: 768px) {
	.button-row {
		gap: 9%;
	}
}

.button-row .stylish-button {
	text-transform: uppercase;
	text-decoration: none;
	color:  #1e1e1e;
	display: inline-block;
	border: 1px solid;
	border-color: #1e1e1e;
	padding: 5px 10px;
	font-size: 1.1em;
	font-weight: 400;
	width: 100%;
	text-align: center;
	margin-bottom: 14px;
}

.button-row .stylish-button:hover {
    border-color: #999999;
    color: #ffffff;
    background-color: #2e2e2e;
    background-color: var( --color-primary, #2e2e2e );
}

.icontext svg {
	height: 30px;
	width: 30px;
	margin: 0 15px 0 10px;
	float: left;
}
.icontext span {
	font-size: 1.05em;
	//font-weight: 800;
	padding-top: 3px;
}
.icontext a {
	border: none !important;
	font-weight: normal;
}
.icontext a:hover {
	text-decoration: underline;
	color: #383835;
}
.icontext:last-child {
	padding-bottom: 1.5rem;
}

.job-offer .toggle {
	border: none;
	background: none;
	display: block;
	padding: 0;
	text-align: left;
}

.job-offer .toggle .toggle-icon {
	width: 30px;
	height: 30px;
	margin: 10px 5px 0 5px;
	float: left;
}

.job-offer .toggle .plus { display: block; }
.job-offer .toggle .minus { display: none; }

.job-offer .toggle.active .plus { display: none; }
.job-offer .toggle.active .minus { display: block; }

.job-offer .job-name {
	font-weight: 400;
	font-size: 1.2em;
	line-height: 1.3em;
	margin-left: 60px;
	margin-bottom: 25px;
}

.job-offer .job-description { 
	display: none; 
	margin-left: 60px;
	margin-bottom: 3em;
}
.job-offer .toggle.active ~ .job-description { display: block; }



/***********/
/* Galerie */
/***********/

.gallery-grid {
	margin-left: -5px;
	margin-right: -5px;
}
@media (min-width: 768px) {
	.gallery-grid {
		margin-left: -10px;
		margin-right: -10px;
	}
}
@media (min-width: 1200px) {
	.gallery-grid {
		margin-left: -20px;
		margin-right: -20px;
	}
}

.gallery-tile {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
}
.gallery-tile:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.gallery-tile a {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border: none;
	padding: 5px;
}
@media (min-width: 768px) {
	.gallery-tile a {
		padding: 10px;
	}
}
@media (min-width: 1200px) {
	.gallery-tile a {
		padding: 20px;
	}
}

.gallery-tile  .gallery-image {
	height: 100%;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.lb-outerContainer {
	background-color: RGBA(0,0,0,0) !important;
}

/**********/
/* Pop-Up */
/*********/

.pop-up-container {
	max-width: 300px;
	min-width: 200px;
	width: 14%;
	position: fixed;
	top: 13rem;
	right: 1rem;
}

.pop-up {
	position: relative;
	background-color: var(--popup-background-color);
	border: 2px solid;
	border-color: var(--popup-border-color);
	margin-bottom: 30px;
}

.close-pop-up{
	--line-color: #fff;
	height: 20px;
	width: 20px;
	display: block;
	position: absolute;
	top: -10px;
	right: -10px;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}
.close-pop-up:hover{
	--line-color: var(--popup-border-color);
}

.close-pop-up svg{
	width: 100%;
	height: 100%;
	top: 0;
	position: absolute;
}

.pop-up-content {
	padding: 15px;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.pop-up-content h5,
.pop-up-content div,
.pop-up-content a {
	font-size: 0.95em;
	color: #fff;
}

.pop-up-content h5{
	color: var(--popup-border-color);
	font-weight: 400;
	text-transform: uppercase;
}

.pop-up-button{
	display: inline-block;
	padding: 5px 10px;
	background-color: var(--popup-background-color);
	border: 1px solid #fff;
	border-bottom: 1px solid #fff !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	text-decoration: none !important;
}

.pop-up-button:hover{
	background-color: #ddd;
	border: 1px solid #111;
	border-bottom: 1px solid #111 !important;
	color: #111 !important;
}

/**********/
/* Pop-Up */
/*********/

.pop-up-container {
	max-width: 300px;
	min-width: 200px;
	width: 14%;
	position: fixed;
	top: 13rem;
	right: 1rem;
}

.pop-up {
	position: relative;
	background-color: var(--popup-background-color);
	border: 2px solid;
	border-color: var(--popup-border-color);
	margin-bottom: 30px;
}

.close-pop-up{
	--line-color: #fff;
	height: 20px;
	width: 20px;
	display: block;
	position: absolute;
	top: -10px;
	right: -10px;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}
.close-pop-up:hover{
	--line-color: var(--popup-border-color);
}

.close-pop-up svg{
	width: 100%;
	height: 100%;
	top: 0;
	position: absolute;
}

.pop-up-content {
	padding: 15px;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.pop-up-content h5,
.pop-up-content div,
.pop-up-content a {
	font-size: 0.95em;
	color: #fff;
}

.pop-up-content h5{
	color: var(--popup-border-color);
	font-weight: 400;
	text-transform: uppercase;
}

.pop-up-button{
	display: inline-block;
	padding: 5px 10px;
	background-color: var(--popup-background-color);
	border: 1px solid #fff;
	border-bottom: 1px solid #fff !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	text-decoration: none !important;
}

.pop-up-button:hover{
	background-color: #ddd;
	border: 1px solid #111;
	border-bottom: 1px solid #111 !important;
	color: #111 !important;
}

/* quadratisch */

.pop-up-container .format-square .pop-up-content {

	aspect-ratio: 1/1;

	min-height:100px !important;

}





/* slide in */

.slidein-content.hidden {

	display:none;

}

@media (max-width: 1480px) {



	.slidein-content.hidden {

		display:block;

	}

	.pop-up-container .pop-up-content {

		max-width: 300px;

		min-width: 200px;

	}



	.pop-up-container .format-square .slidein-content {

		max-height: 300px;

	}



	.slidein-content {

		position: fixed;

		z-index: 10;

		width: auto;

		visibility: hidden;

		padding: 0;

		margin: 0;

		right:40px;

		left: calc(100vw - 340px);

	}



	.slidein-content .close-pop-up {

		display:none;

	}

	.slidein-content .pop-up-content {

		margin-right:40px;

		width:300px;

	}

	.slidein-handle {

		display: block !important;

		text-align: center;

		z-index: 11;

		position: fixed;

		bottom: 80px;

		right: 40px;

		width: 80px;

		height: 80px;

		margin: 0 auto;

	}

	.slidein-handle a {

		display: flex;

		align-items: center;

		margin: 0 auto;

		width: 80px;

		height: 80px;

		padding-top: 0px;

		text-align: center;

		line-height: 1.2;

		font-weight: 700;

		background-color: #1B343E;

		color: #ffffff;

		border-radius: 50%;

	}

	.slidein-handle a:not(.bg) {

		text-decoration: none;

	}

	.slidein-handle a.bg {

	}

	.slidein-handle a.bg .img-c,

	.slidein-handle a.bg .img-o {

		position: absolute;

		top:3px;

		bottom:3px;

		left:3px;

		right:3px;

		background-repeat: no-repeat;

		background-size: 80% 80%;

		background-position: center;

		display: block;

	}

	.slidein-handle a:not(.closed) .img-c,

	.slidein-handle a.closed .img-o {

		display:none;

	}

	.slidein-handle a span.o,

	.slidein-handle a span.c {

		margin: 0 auto;

	}

	.slidein-handle a span.o {

		display:block;

	}

	.slidein-handle a span.c {

		display:none;

	}

	.slidein-handle a.closed span.o {

		display:none;

	}

	.slidein-handle a.closed span.c {

		display:block;

	}

	.slidein-handle a:hover {

		color: #ffffff !important;

	}

	.slidein-handle a.closed:hover {

		color: #ffffff !important;

	}

	.slidein-handle a.closed {

		color: #ffffff;

		background-color: #1B343E;

	}

	.slidein-handle.ani a.closed:before {

		-webkit-transition: all 1s;

		transition: all 1s;

		content: '';

		position: absolute;

		border-radius: 50%;

		background-color: #F0B521;

		display: block;

		opacity: 0;

		z-index: -1;

	}

	.slidein-handle.ani a.closed:after {

		-webkit-transition: all 1s;

		transition: all 1s;

		content: '';

		position: absolute;

		border-radius: 50%;

		background-color: #F7D47C;

		display: block;

		opacity: 0;

		z-index: -2;

	}

	.slidein-handle.ani a.closed.end2:before {

		left: -5px;

		right: -5px;

		top: -5px;

		width: calc(100% + 10px);

		height: calc(100% + 10px);

		opacity: 1;

		-webkit-animation: ani1r 3.2s forwards;

		animation: ani1r 3.2s forwards;

		-webkit-animation-delay: 3.2s;

		animation-delay: 3.2s;

	}

	.slidein-handle.ani a.closed.end2:after {

		left: -10px;

		right: -10px;

		top: -10px;

		width: calc(100% + 20px);

		height: calc(100% + 20px);

		opacity: 1;

		-webkit-animation: ani2r 3.2s forwards;

		animation: ani2r 3.2s forwards;

	}

	.slidein-handle.ani a.closed:before {

		left: -5px;

		right: -5px;

		top: -5px;

		width: calc(100% + 10px);

		height: calc(100% + 10px);

		opacity: 0;

		-webkit-animation: ani1l ease-in-out 3.2s 0s infinite;

		animation: ani1l ease-in-out 3.2s 0s infinite;

	}

	.slidein-handle.ani a.closed:after {

		left: 0;

		right: 0;

		top: 0;

		width: 100%;

		height: 100%;

		opacity: 0;

		-webkit-animation: ani2l ease-in-out 3.2s 3.2s infinite;

		animation: ani2l ease-in-out 3.2s 3.2s infinite;

	}

	@-webkit-keyframes ani1l {

		0% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 0;

		}

		26% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

		69% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

		90% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

		100% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}

	@keyframes ani1l {

		0% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 0;

		}

		26% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

		69% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

		90% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

		100% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}

	@-webkit-keyframes ani2l {

		0% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 0;

		}

		23% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 0;

		}

		46% {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

		59% {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

		81% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

		100% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}

	@keyframes ani2l {

		0% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 0;

		}

		23% {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 0;

		}

		46% {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

		59% {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

		81% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

		100% {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}

	@-webkit-keyframes ani1 {

		from {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 0;

		}

		to {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

	}

	@keyframes ani1 {

		from {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 0;

		}

		to {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

	}

	@-webkit-keyframes ani1r {

		from {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

		to {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}

	@keyframes ani1r {

		from {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 1;

		}

		to {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}

	@-webkit-keyframes ani2 {

		from {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 0;

		}

		to {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

	}

	@keyframes ani2 {

		from {

			left: -5px;

			right: -5px;

			top: -5px;

			width: calc(100% + 10px);

			height: calc(100% + 10px);

			opacity: 0;

		}

		to {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

	}

	@-webkit-keyframes ani2r {

		from {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

		to {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}

	@keyframes ani2r {

		from {

			left: -10px;

			right: -10px;

			top: -10px;

			width: calc(100% + 20px);

			height: calc(100% + 20px);

			opacity: 1;

		}

		to {

			left: 0;

			right: 0;

			top: 0;

			width: 100%;

			height: 100%;

			opacity: 1;

		}

	}



}

@media (max-width: 480px) {

	.slidein-handle {

		transform: scale(0.8);

		bottom: 10px;

		right: 10px;

	}

	.slidein-content {

		right: 10px;

		left: calc(100vw - 300px - 10px);

	}

}

@media (max-width: 360px) {

	.slidein-content {

		left: 10px;

	}

	.slidein-content .pop-up-content {

		width:100%;

		max-width:100%;

	}

}



/* end slide in */