body {
  margin-bottom : 60px;
}

.paradeiser-wapper{
	position: fixed;
	bottom: 0px;
	left: 0;
	z-index: 999;
	width: 100%;
}

.paradeiser {
  position: relative;
  z-index: 999;
  width: 98%;
  height: 100%;
  background: url(../img/bg-pattern.png) center center repeat #252525;
  -webkit-transition: top 0.4s ease;
          transition: top 0.4s ease;
  backdrop-filter: blur(10px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}

.paradeiser a {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: -apple-system, -apple-system-body, "Roboto", "Helvetica Neue", "Segoe UI", "Arial", sans-serif;
  cursor: pointer;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 5;
  -webkit-flex-grow: 5;
      -ms-flex-positive: 5;
          flex-grow: 5;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}


.paradeiser span {
  margin-top: 5px;
  font-size: 14px;
}


.paradeiser .paradeiser_logo {
  max-width: 40px;
  width: 100%;
}

.logo-box {
	background-color: #cb0000;
	
}

.logo-box span {
	position: relative;
	font-size: 16px ;
	font-weight: 400;
	background-image: url(../img/logo.png);
	background-position: left center;
	background-size:contain;
	background-repeat: no-repeat;
	padding: 7px 0 7px 50px;
	}
	
.logo-box:after {
	content: '';
	position: absolute;
	right: -8px;
	top: 0;
	border-right: 8px solid transparent;
	border-left: 0px solid transparent;
	border-top: 32px solid #cb0000;
	border-bottom: 32px solid #cb0000;
    height: 100%;
}

.arrow:before{
	content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    bottom: 19%;
    left: -16px;
    border: 4px solid #fff;
    border-radius: 25px;
    background: url(../img/arrows.png) -170px -11px no-repeat #252525;
}

.middle:before {
	content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border: 3px solid #fff;
    border-radius: 25px;
    bottom: 41%;
}

.middle:before {
    left: 0;
}
.middle:after {
    right: 0;  
}
.paradeiser:before, .paradeiser:after {
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
}

.paradeiser:before {
	left: -8px;
	border-left: 8px solid transparent;
	border-right: 0px solid transparent;
	border-top: 32px solid #cb0000;
	border-bottom: 32px solid #cb0000;
}
.paradeiser:after {
	right: -8px;
	border-right: 8px solid transparent;
	border-left: 0px solid transparent;
	border-top: 32px solid #252525;
	border-bottom: 32px solid #252525;
}

@media (max-width: 768px) {
	body {
		margin-bottom : 50px;
	}
	.paradeiser{
		width: 96%;
	}
	.paradeiser-wapper {
		height: 50px;
	}
	.paradeiser span {
		font-size: 10px;
	}
	.logo-box span {
		font-size: 14px;
	}
	.arrow:before {
		width: 25px;
		height: 25px;
		bottom: 22%;
		left: -10px;
		border: 3px solid #fff;
		background-position: -174px -15px;
	}
	.logo-box:after {
		border-right: 8px solid transparent;
		border-left: 0px solid transparent;
		border-top: 27px solid #cb0000;
		border-bottom: 27px solid #cb0000;
		height: 100%;
	}
	.paradeiser:before{
		border-top: 27px solid #cb0000;
		border-bottom: 27px solid #cb0000;
	}
	.paradeiser:after {
		border-top: 27px solid #252525;
		border-bottom: 27px solid #252525;
	}
}
@media (max-width: 600px) {
	.logo-box span {
		font-size: 10px;
		padding: 0 0 0 30px;
	}
}

@media (min-width: 768px) {
  .paradeiser-wapper {
    height: 60px;
  }
  .paradeiser br {
	  display: none;
  }
}

@media (max-width: 768px) {
	.arrow:before {
		display: none;
	}
}

@media (max-width: 768px) {
	.middle:before {
		display: none;
	}
}